jQuery - classe select ne figure pas dans une autre classe

Question

Possible en double:
jQuery filtering selector to remove nested elements matching pattern.

J'ai une hiérarchie de groupes. Quelque chose comme:

<div class="group"> 
    <span class="child"></span> 
    <div class="group"> 
     <span class="child"></span> 
     <span class="child"></span> 
     <span class="child"></span> 
    </div> 
    <span class="child"></span> 
    <span class="child"></span> 
    <div>This child is farther down <span class="child"></span></div> 
</div> 

Comment puis-je sélectionner les enfants dans chaque groupe, sans sélectionner les enfants d'un sous-groupe?

$(".group").each(function() { 
    // Wrong, click fires twice (the 1st level group selects 2nd level children) 
    var children = $(this).children(".child"); 

    // Wrong, click fires twice 
    children = $(this).children(":not(.group) .child"); 

    // How can I properly do this?? 

    children.click(function() { 
     alert("children.click"); 
    }); 
}); 

J'ai aussi essayé find() au lieu de children(), mais je ne peux pas sembler que cela fonctionne correctement. De même, je ne peux pas utiliser d'enfants directs (ou >) car les descendants pourraient se trouver à l'intérieur d'autres balises HTML non-.gorup (c'est-à-dire, plusieurs niveaux DOM).

Answer 1

Si .child est toujours un descendant direct de son groupe, alors le sélecteur > fonctionnera, comme indiqué. Sinon, vous pouvez filtrer défini avec une fonction

var group = this; 
$(group).find('.child').filter(function() { 
    // check if current element belongs to our group 
    return $(this).closest('.group')[0] == group; 
}) 

An example

Answer 2

Si vous voulez que les enfants directs d'un groupe, vous pouvez essayer quelque chose comme:

$('.group > .child').click(function(){ 
    alert('You clicked on: '+$(this).text()); 
}); 

documentation Voir à jQuery: child-selector

EDIT: sinon vous pouvez consulter le duplicate question publié par Gnarf

Answer 3

Essayez cela, il est également très lisible:

$(".group").each(function() { 
    var allChilds = $(this).find('.child'); 
    var subChilds = $(this).find('.group .child'); 

    var firstChilds = allChilds.not(subChilds); 
    firstChilds.css({ color: 'red' }); 
});