javascript - 无法在 jquery 的 div 中显示 ul li 的计数

Question

我有一些 Jquery 可以找到列表的数量 <li> <ul> 中的元素.我想在带有类的 div 中显示结果/计数，但我目前的代码无法正常工作？当我提醒结果时，它很好。

结果应该显示在文本“测试”所在的位置，但它只显示“测试”而不是计数。当我从 result-item-1 的 id 中取出 div 时等它确实有效。

这是一个JS Fiddle Link .

目前的代码是:

<div id="result-item-1" class="search" data-search-position="1" style="width: 50%;">
   <div class='item-colours-result'>
      <ul class="">
         <li>1</li>
         <li>2</li>
      </ul>
   </div>
   <div class="numberOfColours">Test</div>
</div>

<div id="result-item-2" class="search" data-search-position="2" style="width: 50%;">
   <div class='item-colours-result'>
      <ul class="">
         <li>1</li>
         <li>2</li>
         <li>3</li>
      </ul>
   </div>
   <div class="numberOfColours">Test</div>
</div>

<div id="result-item-3" class="search" data-search-position="3" style="width: 50%;">
   <div class='item-colours-result'>
      <ul class="">
         <li>1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
      </ul>
   </div>
   <div class="numberOfColours">Test</div>
</div>

Jquery:

$(document).ready(function() {
    $('.search').each(function(index, item) {
        var colorCount = $(item).find('.item-colours-result ul li').length;
        //alert(item.id+':'+colorCount)
        $(item).attr('data-search-position', colorCount);
        $(this).next(".numberOfColours").html(colorCount + ' ' + 'Colours');
    })
});

Answer 1

您可以将所有代码缩减为:

$('.numberOfColours').html( function(){return $(this).prev().find('li').length} )

$('.numberOfColours').html(function() {
  return $(this).prev().find('li').length
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result-item-1" class="search" data-search-position="1" style="width: 50%;">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
    </ul>
  </div>
  <div class="numberOfColours">Test</div>
</div>



<div id="result-item-2" class="search" data-search-position="2" style="width: 50%;">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div class="numberOfColours">Test</div>
</div>



<div id="result-item-3" class="search" data-search-position="3" style="width: 50%;">
  <div class='item-colours-result'>
    <ul class="">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <div class="numberOfColours">Test</div>
</div>

这会选择 numberOfColours div 并遍历它们。 .html()可以传递一个函数，该函数将返回基于使用 .prev() 和 .find() 的 div 的计数。