Sélecteur CSS pour ne cibler que les enfants immédiats et non d'autres descendants identiques

Question

J'ai imbriqué liste triable qui peuvent avoir des éléments dynamiquement ajoutés ou supprimés et peuvent être imbriquées n-niveaux de profondeur. Sur la nidification, un nouvel élément ul est injecté dans quel élément li est sélectionnée pour être la mère. L'état initial de la liste est quelque chose comme ce qui suit:

<ul id="parent">
    <li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
    <li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
    <li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
    	<ul>
    		<li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
    		<li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
    		<li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
    		<li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
    		<li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
    		<li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>					
    	</ul>
    </li>	
    <li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
    <li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
    <li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>					
</ul>

J'utilise MooTools pour faire le tri, etc et il fonctionne très bien, mais ce que je vais avoir du mal à faire est de réinitialiser la position du texte correctement sur le tri. Chaque sélecteur CSS j'essaie d'utilisation inclut également tous des enfants plutôt que de simplement le li des éléments qui appartiennent à la liste et n'appartenant à des sous-listes. Supposons que, sauf pour l'identification, la position, et le texte, chaque élément li dans toutes les listes est identique à tous les autres. Est-il un sélecteur pour ne prendre que les enfants immédiats? Est-il une autre façon de le faire?

Edit:

J'ai essayé quelques-uns des enfants les sélecteurs comme ceux mentionnés:

• "ul > li" Va sélectionner tous les éléments li qui sont les enfants d'un ul, et pas seulement l'immédiat les enfants
• "#parent > li" Fait la même chose que ci-dessus.

Edit 2:

Voici la fonction que je suis en train de l'avoir exécuté lorsqu'un élément est supprimé (ce qui n'est pas de gérer le tri, qui fonctionne très bien, juste la mise à jour de la position). Notez qu'il est également MooTools syntaxe:

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, le fait de changer l'ordre des éléments sur le niveau principal sera renuméroter tout 1-12, même les sous-listes. Changer n'importe quel élément sur une sous-liste vous donnera le bon nombres de cette liste, mais amener les parents des listes d'erreurs de comptage de tous les enfants li éléments dans la numérotation.

Edit 3:

Bon, j'ai l'impression que c'est un vilain hack, mais il fonctionne.

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++;
    });
}

Answer 1

ul > li

seulement les enfants immédiats. Ainsi, par exemple, de ne faire que le haut niveau de la liste des éléments que vous pouvez utiliser:

#parent > li

Remarque: ce n'est pas pris en charge sur IE6.

La commune de la solution de contournement pour assurer la compatibilité ascendante est de faire quelque chose comme ceci:

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

C'est plus fastidieux, parce que vous avez à appliquer des styles et mettez-les hors tension (et vous ne pouvez pas nécessairement savoir ce que les anciennes valeurs sont) mais c'est la seule IE6-friendly pur CSS solution de contournement est.

Edit: Ok, vous avez un MooTools problème spécifique. getElements() retourne tous les descendants, et 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.