compter le nombre de div dans chaque conteneur avec jquery

Question

J'essaie de comprendre comment je peux compter le nombre de div à l'intérieur du conteneur "bar" puis ajouter le nombre en tant que classe. Par exemple, dans le premier élément class = « 3 bar » et la deuxième class = « bar 2 »

<div class="item"> 
    <div class="foo"></div> 
    <div class="bar"> 
    <div class="slide"></div> 
    <div class="slide"></div> 
    <div class="slide"></div> 
    </div> 
</div><!-- /item --> 

<div class="item"> 
    <div class="foo"></div> 
    <div class="bar"> 
    <div class="slide"></div> 
    <div class="slide"></div> 
    </div> 
</div><!-- /item --> 

Answer 1

$('#item').each(function(i, elem){ 
    var $this = $(this), 
     len = $(this).find('.bar').children('div').length; 

    $this.addClass('bar ' + len); 
}); 

Alors que j'ai réalisé ce ecriture que vous utilisez plusieurs IDs avec le nom item. Ce n'est pas HTML markup valide et jQuery ne retournera probablement que la première occurrence. Remplacez l'ID par des classes et utilisez $('.item').

Answer 2

$.each($(".item"), function(i, d) { 
    var count = $(d).find(".bar div").length; 
    $(d).addClass("bar_" + count); 
}) 

Answer 3

Dans jQuery 1.4, vous pouvez utiliser une fonction comme argument .addClass():

$('.bar').addClass(function() { 
    return $(this).children('div').length; 
});