Javascript 对象属性不返回正确的长度

Question

我使用 jQuery 动态克隆一个元素并要求一个对象返回它的长度，但它每次都返回 1。请看小提琴：

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

Answer 1

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

将在开始时计算一次并缓存到obj.elem。这将是1。

注意（感谢nnnnn）：当您引用一个jQuery 对象时，其他代码可能会更新该对象以添加更多元素。

解决方案 1：

你需要做的是，在每次计算长度之前重做选择器。

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>

解决方案 2：

将obj 更改为：

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

然后检查长度，如：$('.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>