Sélectionnez un élément exact et non ses enfants

Question

J'ai un menu comme celui-ci;

<ul> 
<li><a>1</a></li> 
<li><a>2</a> 
    <ul> 
    <li><a>3</a></li> 
    <li><a>4</a></li> 
    <li><a>5</a></li> 
    <li><a>6</a> 
    <ul> 
    <li><a>7</a></li> 
    <li><a>8</a></li> 
    <li><a>9</a></li> 
    </ul> 
    </li> 
    </ul> 
    <li><a>10</li> 
</ul> 

Si je veux faire une sélection au 2e niveau avec jQuery.

$('ul li ul li') { action() } 

Mais quand je le fais, cette action sera également adopté par ses enfants, (ul li ul li ul li) Je ne veux pas que cela se produise.

Je veux juste sélectionner (ul li ul li).

Avec jQuery, comment puis-je le faire fonctionner?

Answer 1

$('ul > li > ul > li').action() 

Mais vous aurez besoin d'ancrer le haut niveau ul en quelque sorte ... avec une carte d'identité, par exemple.

$('#menu > li > ul > li').action() 

Answer 2

La meilleure façon de résoudre ce problème est de donner l'extérieur <ul> un identificateur de classe CSS ou id. Utilisez ensuite les descendants directs sélecteur

$('ul.className > li > ul > li') // CSS class className 

ou

$('#id > li > ul > li') // id id 

Answer 3

Vous parlez d'un gestionnaire de clic qui applique uniquement à l'élément lui-même et non les éléments contenus dans ce? Je suggère d'utiliser des classes et d'ajouter un gestionnaire de clic aux sous-éléments qui empêche l'événement de bouillonner en utilisant stopPropagation. Ce dernier est nécessaire parce que lorsque vous cliquez sur l'élément interne, l'événement sera également déclenché sur son parent. Si vous souhaitez uniquement que le gestionnaire soit invoqué lorsque vous cliquez sur l'élément lui-même et aucun de ses enfants, vous devez arrêter l'apparition de l'événement.

$('ul.secondlevel li').click(function() { 
    // do something 
}); 

$('ui.thirdlevel li').click(function(e) { 
     // do something else 
     e.stopPropagation(); 
}); 

Answer 4

Mais quand je le fais, cette action sera adoptée par c'est aussi des enfants, (ul li ul li ul li) Je ne veux pas que se produise.

Utilisez le sélecteur eq pour cibler un li spécifique:

$('#mainmenu li ul li').eq(5)............ 

Ou sa variation:

$('#mainmenu li ul li:eq(5)')............ 

Answer 5

Voulez-vous dire que vous voulez sélectionner les li s contenant 3, 4, 5 et 6? Si oui, donnez leurs parents (deuxième niveau) ul s un identifiant et d'utiliser le sélecteur de descendant direct avec elle:

$('ul#second_level_ul > li')