CODEWITHSUNDEEP
javascriptjquery
Rigil
Rigil

Reputation: 549

jQuery .size() question

When you click the "Add Div" button, why doesn't the number increment?

http://jsfiddle.net/cN2zR/

Upvotes: 1

Views: 76

Answers (3)

Chandu
Chandu

Reputation: 82903

Because the size of the jquery result is calculated inline and ont everytime you use . You can instead change d to a function that returns the HTML string and use it so that you get the size calculated every time you refer to it.

d = function(){
    return '<div class="historyItem">Test ' + ($("#history > div").size() + 1) + '</div>';
}

$('#b').click(function() {
    //console.time("timing Time");
    $('#history').append(d());
    //console.timeEnd("timing Time");
    $('#history').scrollTo('max');
});

Check this Post: http://jsfiddle.net/cN2zR/7/

Upvotes: 0

Josiah Ruddell
Josiah Ruddell

Reputation: 29831

http://jsfiddle.net/cN2zR/3/ It does now :)

make d a function so it can be run each add. 

var d = function(){
   return '<div class="historyItem">Test ' + ($("#history > div").size() + 1) + '</div>';
}

Also I noticed your problem with the scroll link. A quick trick to scroll to the bottom of a container is using the .scrollTop([arbitrary high number])

Upvotes: 1

Jess
Jess

Reputation: 42928

size() is being evaluated once, when the value is assigned to d. You'll need to move the assignment inside the function to evaluate it each time.

Or, if you want it to keep it outside, you can make it into a function:

var d = function() { return '<div class="historyItem">Test ' + ($("#history > div").size() + 1) + '</div>'; }

then

$('#history').append(d());

Upvotes: 2

Related Questions