jquery - 通过 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.
});

这样，您就可以将多个框全部包含在各自的范围内