CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sole
Sole

Reputation: 3340

Cannot display count of ul li in div in jquery

I have some Jquery that finds the amount of list <li> items in a <ul>. I would like to show the result/count in a div with a class, but the code I have so far is not working? When I alert the result its fine.

The result should be displayed where the text 'Test' is but it just shows 'Test' not the count. When I take the div out of the id of result-item-1 etc it does work.

Here is a JS Fiddle Link.

The code so far is:

<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 + '&nbsp;' + 'Colours');
    })
});

Upvotes: 1

Views: 80

Answers (2)

faendaro
faendaro

Reputation: 138

Use .find() instead of .next()

$(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).find(".numberOfColours").html(colorCount + '&nbsp;' + 'Colours');
    })
});

.next() finds the next matching sibling (see documentation), while .find() searches within the parent. The div .numberOfColours is a child of .search, not its sibling.

Upvotes: 2

j08691
j08691

Reputation: 207901

You can reduce all your code to:

$('.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>

This selects the numberOfColours divs and iterates over them. .html() can be passed a function which will return the count based on the div it's on using .prev() and .find().

Upvotes: 3

Related Questions