Sélecteur CSS pour cibler uniquement les enfants immédiats et non d’autres descendants identiques

J’ai une liste sortingable nestede qui peut avoir des éléments ajoutés ou supprimés dynamicment et qui peuvent être nesteds n-niveaux profonds. Lors de l’imbrication, un nouvel élément ul est injecté dans l’élément li sélectionné pour être le parent. L’état initial de la liste est similaire à ce qui suit:

 1One
 2Two
 3Three  1A
 2B
 3C
 4D
 5E
 6F
 
 
 4Four
 5Five
 6Six

J’utilise MooTools pour faire le sorting, etc., et ça fonctionne bien, mais j’ai du mal à réinitialiser correctement le texte de position sur le sorting. Tous les sélecteurs CSS que j’essaie d’utiliser incluent tous les enfants plutôt que les éléments li qui appartiennent à la liste et non les éléments des sous-listes. Supposons que, sauf pour les identifiants, la position et le texte, chaque élément li de toutes les listes est identique à tous les autres. Y a-t-il un sélecteur pour obtenir uniquement les enfants immédiats? Y a-t-il une autre façon de faire cela?

J’ai essayé des sélecteurs enfants comme ceux mentionnés:

ul > li Sélectionne tous les éléments li qui sont des enfants d’un ul, pas seulement les enfants immédiats
#parent > li Fait la même chose que ci-dessus.

Voici la fonction que je suis en train d’exécuter lorsqu’un élément est supprimé, ce qui ne gère pas le sorting, ce qui fonctionne bien, il suffit de mettre à jour la position. Notez que c’est aussi la syntaxe MooTools:

 var drop = function(el){ el.getParents('ul').reverse().each(function(item){ var posCount = 1; item.getElements('li a span[class=position]').each(function(pos){ pos.set('text', posCount); posCount++; }); }); }

Actuellement, toute modification de l’ordre des articles au niveau principal renumérotera tout ce qui est 1-12, même les sous-listes. La modification de n’importe quel élément d’une sous-liste donnera les numéros corrects pour cette liste, mais provoquera le comptage incorrect de tous les éléments enfants li dans la numérotation des listes parentes.

J’ai l’impression que c’est un hack moche, mais ça marche:

 var drop = function(){ var ulCount = 1; $$('ul').each(function(item){ if(item.get('id') != 'parent') { item.set('id', 'id-'+ulCount); } var elId = item.get('id'); var posCount = 1; $(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos){ pos.set('text', posCount); posCount++; }); ulCount++; }); }

 ul > li

ne fait que les enfants immédiats. Par exemple, pour ne faire que les éléments de la liste de niveau supérieur, vous pouvez utiliser:

 #parent > li

Note: ceci n’est pas supporté sur IE6.

La solution de contournement habituelle pour la rétrocompatibilité consiste à faire quelque chose comme ceci:

 #parent li { /* style appropriately */ } #parent li li { /* back to normal */ }

C’est plus fastidieux car vous devez appliquer des styles, puis les désactiver (et vous ne connaissez peut-être pas forcément les anciennes valeurs), mais c’est la seule solution CSS purement compatible avec IE6.

Edit: Ok, vous avez un problème spécifique à MooTools. getElements () renvoie tous les descendants, pas seulement les enfants immédiats. Essayez d’utiliser getChildren () .

 var drop = function(el){ el.getParents('ul').reverse().each(function(item){ var posCount = 1; item.getChildren("li").getElements("a span[class=position]").each(function(pos){ pos.set('text', posCount); posCount++; }); }); }

ou quelque chose comme ça.

La question initiale n’a pas été répondue. : seul enfant ne fonctionne que si le seul enfant n’a pas d’enfants descendants. Le post original suggérait que l’inclusion des enfants descendants était due à ul> li alors qu’il est en fait dû à un bug dans: only-child. Paradoxalement: le premier enfant sélectionne le premier enfant dans une liste avec des enfants descendants, tout comme le dernier enfant, mais pas le seul enfant. Je l’ai vérifié dans Firefox, Opera et Chrome. Voici un exemple:

        Item one
 Subitem one Subitem two

Pour activer: règles first-child et: last-child, décommentez les deux derniers éléments. L’implémentation de la norme Selectors Level 3 est donc incohérente dans les principaux navigateurs. La règle: first-child ne doit pas être activée lorsqu’il existe une règle: only-child et qu’un enfant unique a des descendants. Dans l’exemple, l’enfant unique doit être rouge mais vert.