Javascript object property doesn't return correct length

Question

I dynamically clone an element using jQuery and ask an object to return its length, but it returns 1 every time. Please see fiddle:

https://jsfiddle.net/gatzkerob/x5xd2x7q/3/

<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>

var obj = {
elem : $('.a')
}

function cloneThisAndCount(){
$('.a').last().after($('.a').first().clone());
$('.count').text(obj.elem.length);
}

$('button').click(function(){
cloneThisAndCount();
});

Please edit your question to show the relevant code directly in the question body. (As far as your actual problem, nothing in your code updates the obj object after it is created.) — nnnnnn
– nnnnnn, Commented Jul 29, 2016 at 3:36
He just doesn't know that the selector result is caching to the property — Iceman
– Iceman, Commented Jul 29, 2016 at 3:37
I know that I can access directly using $('.a') but I want to use properties so I don't have to type long class names every time. — gatzkerob
– gatzkerob, Commented Jul 29, 2016 at 3:39

Community · Accepted Answer · 2017-05-23 10:28:44Z

2

var obj = {
  elem : $('.a')
}

will be computed once and cached into obj.elem in the begenning. which will be 1.

Note (thanx to nnnnn): When you have a reference to a jQuery object it is possible that other code could update that object to add more elements to it.

SOLUTION 1:

What you need is to do is, redo the selector every time before calculating length.

function cloneThisAndCount() {
  $('.a').last().after($('.a').first().clone());
  $('.count').text($('.a').length);
}

$('button').click(function() {
  cloneThisAndCount();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>

SOLUTION 2:

Change obj to:

var obj = {
  elem : function(){ return $('.a')}
}

and then check length like: $('.count').text(obj.elem().length);

var obj = {
  elem: function() {
    return $('.a')
  }
}

function cloneThisAndCount() {
  $('.a').last().after($('.a').first().clone());
  $('.count').text(obj.elem().length);
}

$('button').click(function() {
  cloneThisAndCount();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="count">0</span>
<br>
<button>click</button>
<br>
<span class="a">a</span>

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jul 29, 2016 at 3:38

Iceman

6,1652 gold badges25 silver badges34 bronze badges

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

10 Comments

gatzkerob Over a year ago

Snippet #2 did the trick, cheers. I actually tried that at one stage but didn't add parenthesis after "elem".

nnnnnn Over a year ago

"which will be 1." - Note that when you have a reference to a jQuery object it is possible that other code could update that object to add more elements to it. (But as you've said, it doesn't automatically update itself to include elements later added to the DOM.)

nnnnnn Over a year ago

Cool. Of course (as usual) I'm being overly pedantic, because the vast majority of jQuery methods return a new object without changing the old one so 99% of the time it's not a problem, but there are ways to change an existing jQuery object, e.g., $.merge(obj.elem, $("p")).

Iceman Over a year ago

is there any reason for the behaviour?

Iceman Over a year ago

some being updated, while others don't . - Assuming in the merge example $('p') was updated.

|

Collectives™ on Stack Overflow

Javascript object property doesn't return correct length

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related