Iteration of Jquery functions

Question

I made: http://jsfiddle.net/ablueman/sfjL9kyr/ and wanted to apply this to a class. So every DIV I put that class in, it would show the width and height.

I started trying to create it but I've hit a brick wall: http://jsfiddle.net/ablueman/2uvpk2d5/

In the first DIV it puts 2 working div sets in. In the second DIV it puts 2 non-working div sets in. enter image description here

I've tried everything I can think of, but Im sure its just a fundamental error. Please help.

if ($('div').hasClass('change')) { 
    $('.change').each(function (iterate, val) {
    twoDivs = "<div id='changelog"+iterate+"'></div><div style='clear: right;'></div>";
    $('.change').append(twoDivs);      

     $("#changelog"+iterate).text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
     $(window).resize(function() {
     $("#changelog"+iterate).text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
     });
 });
}

Andy

Sameer Azazi · Accepted Answer · 2014-08-23 11:17:15Z

1

Yup there is a small mistake. What you are trying to do is foreach div you are trying to append a footer and register change event to that. But while attaching footer div and registering event you are referring both divs instead of the one you are iterating on. you just need to hold a reference in a variable.

I have updated your script.

    if ($('div').hasClass('change')) { 
    $('.change').each(function (iterate, val) {
        var self = $(this);
    twoDivs = "<div id='changelog"+iterate+"'></div><div style='clear: right;'></div>";
    self.append(twoDivs);      

     $("#changelog"+iterate).text(' W: ' + self.width() + 'px , H:' + self.height() + 'px ');

     $(window).resize(function() {
     $("#changelog"+iterate).text(' W: ' + self.width() + 'px , H:' + self.height() + 'px ');
     });

 });
}

Here is JSFiddle Link with updated script.

edited Aug 23, 2014 at 11:17

answered Aug 23, 2014 at 11:08

Sameer Azazi

1,49710 silver badges16 bronze badges

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

1 Comment

CptFishPants Over a year ago

Thats got it thanks. Not sure I understand it 100% but im getting there :)

Viswanath Donthi · Accepted Answer · 2014-08-23 11:04:22Z

0

After reviewing your code there were syntactial errors while traversing element with each function. Here's your updated code.

if ($('div').hasClass('change')){ 
    $('.change').each(function(iterate){
        twoDivs = "<div id='changelog"+iterate+"'></div><div style='clear: right;'></div>";
        $('.change').append(twoDivs);      

        $("#changelog"+iterate).text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
        $(window).resize(function() {
            $("#changelog"+iterate).text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
        });
    });
}

answered Aug 23, 2014 at 11:04

Viswanath Donthi

1,8211 gold badge12 silver badges12 bronze badges

Collectives™ on Stack Overflow

Iteration of Jquery functions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related