Question

WordPress里面有一个div .tagchecklist，里面有跨度（标签）。我试图计算这些跨度，但我总是得到0。

我的代码如下：

jQuery( document ).ready( function() {
  console.log( jQuery( '.tagchecklist > span' ).length );
})

.tagchecklist div更新为spans如果我添加新标签或从列表中选择它，但控制台始终输出0.有没有办法对它进行实时检查？

<div class="tagchecklist">
  <span><a id="faq_section-check-num-0" class="ntdelbutton">X</a>&nbsp;ecr</span>
  <span><a id="faq_section-check-num-1" class="ntdelbutton">X</a>&nbsp;ecrrec</span>
  <span><a id="faq_section-check-num-2" class="ntdelbutton">X</a>&nbsp;ercerce</span>
</div>

<p id="tagcloud-faq_section" class="the-tagcloud">
    <a href="#" class="tag-link-4" title="2 topics" style="font-size: 14.3pt;">Account</a>
    <a href="#" class="tag-link-2" title="4 topics" style="font-size: 22pt;">Introduction</a>
    <a href="#" class="tag-link-7" title="1 topic" style="font-size: 8pt;">Other</a>
    <a href="#" class="tag-link-3" title="2 topics" style="font-size: 14.3pt;">Pricing &amp; Billing</a>
</p>

不知怎的，我刚刚做了：

jQuery( document ).ready( function() {
  jQuery( '#faq_section' ).on( 'click', '.tagadd, .ntdelbutton, .the-tagcloud > a', function() {
    console.log( jQuery( '.tagchecklist span' ).length );
  } )
})

它适用于添加标记，但对于.ntdelbutton和.the-tagcloud > a，它不会更新！

Answer 1

一种解决方案是将其添加到event中：

＆＃13;

$(":button").on("click", function() {
  $(".tagchecklist").append("<span></span");
  console.log($(".tagchecklist > span").length);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tagchecklist"></div>
<input type="button" value="Add span" />

＆＃13;

Answer 2

@ Alex的回答是做你需要的理想场所。否则，您需要注意对DOM元素的更改，这可以在此处解答：Detect element content changes with jQuery

实时获取div内的跨度数量

2 个答案: