pass element through function jquery

Question

I want to go through each of the .clipped-box elements and pass them through the following function:

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

    }

})();

I have several .clipped-box elements in the HTML as follows:

<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>

How can I adapt it to this?

DoXicK · Accepted Answer · 2014-08-12 15:07:42Z

2

you can do:

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

that way, you can have multiple boxes all contained in their own scope

answered Aug 12, 2014 at 15:07

DoXicK

4,80226 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

drneel · Accepted Answer · 2014-08-12 15:09:40Z

1

You can use the .each() function in jQuery. Documentation

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

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

answered Aug 12, 2014 at 15:09

drneel

2,9055 gold badges32 silver badges49 bronze badges

2 Comments

DoXicK Over a year ago

so why not just: $('.clipped-box').each(genClips); ?

drneel Over a year ago

There are definitely a ton of different ways to use the $.each() and his function.

Chamika Sandamal · Accepted Answer · 2014-08-12 15:13:16Z

Try it like this

(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

Roko C. Buljan · Accepted Answer · 2014-08-12 15:28:38Z

Invoking your jQuery Method like this? http://jsbin.com/zafor/2/edit

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

All you need:

$.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;
            }
        }
    });
};

any way... what do you use totalSquares for? What should be actually 9999999?

Collectives™ on Stack Overflow

pass element through function jquery

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related