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

您可以在jQuery中使用 .each（）函数。 Documentation

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;
            }
        }
    });
})();

Demo

Answer 4

像这样调用你的jQuery方法？ http://jsbin.com/zafor/2/edit

$('.clipped-box').genClips( 5 );

所有你需要的：

$.fn.genClips = function( amount ){
    return this.each(function(){
        var $t = $(this),
            width = $t.width() / amount,
            height = $t.height() / amount,      
            totalSquares = Math.pow(amount, 2),
            html = $t.find('.content').html(),
            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;
            }
        }
    });
};

任何方式......你用totalSquares做什么？应该是什么9999999？

通过函数jquery传递元素

4 个答案: