jQuery: How to count children within element with class

Question

I have multiple 'div' elements with the same class 'column' and within each one I've got an unordered list 'ul' with class 'list' and elements 'li' with class 'item'.

The number of 'li.item' vary depends on different 'column'. How can I count the number of 'li.item' within a single 'column'?

I tried:

<div class="column">
<ul class="list">
<li class="item">item 1</li>
<li class="item">item 2</li>
<li class="item">item 3</li>
</ul>
</div>
<div class="column">
<ul class="list">
<li class="item">item 4</li>
<li class="item">item 5</li>
</ul>
</div>
<div class="column">
<ul class="list">
<li class="item">item 6</li>
</ul>
</div>

https://jsfiddle.net/u0hj58xe/

I wolud like to have: 3 , 2 , 1 insted of 6,6,6 (each div treated separately).

Mohamed-Yousef · Accepted Answer · 2019-01-17 13:20:59Z

3

you need to use .each() to loop through columns

$('.column').each(function(){
  console.log($(this).find('.item').length);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="column">
  <ul class="list">
    <li class="item">item 1</li>
    <li class="item">item 2</li>
    <li class="item">item 3</li>
  </ul>
</div>
<div class="column">
  <ul class="list">
    <li class="item">item 4</li>
    <li class="item">item 5</li>
  </ul>
</div>
<div class="column">
  <ul class="list">
    <li class="item">item 6</li>
  </ul>
</div>

answered Jan 17, 2019 at 13:20

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

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

Comments

Milind Anantwar · Accepted Answer · 2019-01-17 13:21:43Z

1

Your current code is targeting all ul elements. You Need To iterate over the ul elements and then find child elements in it. You can use elements context this to target the current ul in .each() along with traversing selector to find elements and append count info in div:

$('.list').each(function(){
  var $this = $(this);
  var items = $this.find('.item').length;
  $this.closest('.column').append(items);
});

Working Demo

answered Jan 17, 2019 at 13:21

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Martin M · Accepted Answer · 2019-01-17 13:31:07Z

0

Basically the same answer as the others, just without 'find' and 'closest'.

$('.column').each(function(){
var $this = $(this);
$($this).append($('.list .item', $this).length);
});

answered Jan 17, 2019 at 13:31

Martin M

4658 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQuery: How to count children within element with class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related