1
votes

jQuery: Comment compter les enfants dans l'élément avec la classe

J'ai plusieurs éléments 'div' avec la même classe 'column' et dans chacun d'eux j'ai une liste non ordonnée 'ul' avec la classe 'list' et les éléments 'li' avec la classe 'item'.

Le nombre de «li.item» varie selon les différentes «colonnes». Comment puis-je compter le nombre de 'li.item' dans une seule 'colonne'?

J'ai essayé:

<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/

Je wolud aime avoir: 3, 2, 1 insted de 6,6,6 (chaque division traitée séparément).

jquery

0 commentaires

3 Réponses :

2
votes

vous devez utiliser .each () pour parcourir les colonnes

<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>

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

0 commentaires

0
votes

Votre code actuel cible tous les éléments ul . Vous devez parcourir les éléments ul , puis y trouver des éléments enfants. Vous pouvez utiliser le contexte des éléments this pour cibler le ul actuel dans .each () avec le sélecteur de parcours pour trouver des éléments et ajouter des informations de comptage dans div :

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

Démo de travail p>

0 commentaires

0
votes

Fondamentalement, la même réponse que les autres, mais sans "trouver" et "le plus proche".

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

0 commentaires