元素通过函数jquery

Question

我想遍历每一个..clipped box元素，并通过以下函数传递它们：

(genClips = function() {        
    // For easy use
    $t = $('.clipped-box');     
    // Like I said, we're using 5!
    var amount = 5;     
    // Get the width of each clipped rectangle.
    var width = $t.width() / amount;
    var height = $t.height() / amount;      
    // The total is the square of the amount
    var totalSquares = Math.pow(amount, 2);     
    // The HTML of the content
    var html = $t.find('.content').html();  
    var y = 0;

    for(var z = 0; z <= (amount*width); z = z+width) { 

        $('<div class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);

        if(z === (amount*width)-width) {

            y = y + height;
            z = -width;

        }

        if(y === (amount*height)) {
            z = 9999999;
        }

    }

})();

HTML中有几个.clipped-box元素，如下所示：

<div class="clipped-box piece1">
        <div class="content">
            <img src="img/piece1.png">
        </div>      
    </div>

    <div class="clipped-box piece2">
        <div class="content">
            <img src="img/piece2.png">
        </div>      
    </div>

我怎么才能适应这种情况呢？

Answer 1

你可以：

$('.clipped-box').each(function(){
    var $box = $(this);
    // implement everything here for this single box.
});

这样，您就可以将多个框全部包含在它们自己的作用域中。

Answer 2

您可以在.each()函数中使用jQuery。文档

genClips = function(item) {        
    // For easy use
    $t = item;
    ....
};

$('.clipped-box').each(function(){
    var $box = $(this);
    genClips($box);
});

Answer 3

像这样试试

(genClips = function () {
    $('.clipped-box').each(function () { <-- use each here
        $t = $(this);
        var amount = 5;
        var width = $t.width() / amount;
        var height = $t.height() / amount;
        var totalSquares = Math.pow(amount, 2);
        var html = $t.find('.content').html();
        var y = 0;
        for (var z = 0; z <= (amount * width); z = z + width) {
            $('<div class="clipped" style="clip: rect(' + y + 'px, ' + (z + width) + 'px, ' + (y + height) + 'px, ' + z + 'px)">' + html + '</div>').appendTo($t);
            if (z === (amount * width) - width) {
                y = y + height;
                z = -width;
            }

            if (y === (amount * height)) {
                z = 9999999;
            }
        }
    });
})();

演示