jQuery: Obtenir premier élément de type en haut UL dans une liste imbriquée

Question

J'ai une liste imbriquée comme ceci:

<ul class="list"> 

    <li class="list_item_type_1"> 
     <ul class="list"> 
      <li class="list_item_type_2">Unnested item</li> 
     </ul> 
    </li> 

    <li class="list_item_type_2">Unnested item</li> 

</ul> 

Avec jQuery Je veux ajouter un élément de liste avant tout .list_item_type_2 dans la première .list.

Je l'écris comme ceci:

$('.list:first').find('li.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>'); 

Cela ne fonctionnera pas comme prévu parce que le script trouve la première .list_item_type_2 dans la deuxième.list et le nouveau code ajoute là au lieu.

Comment puis-je conserver la recherche dans le premier ul et l'empêcher d'entrer des éléments sous-jacents ul?

À la votre!

Answer 1

Peut-être essayer de combiner le sélecteur dans une expression?

$('.list:first > LI.list_item_type_2:first').before('<li class="list_item_type_1">Nested list (...)</li>'); 

Le sélecteur > ne correspond que les enfants directs, as explained in the doc.

Answer 2

Premièrement, je conseillerais de construire du HTML de cette façon. Utilisez jQuery pour assembler le code HTML. Il prend soin de s'échapper et toutes ces autres choses utiles:

$("<li></li>").addClass("list_item_type_1") 
    .text("Nested list (...)") 
    .prependTo("ul.list:first > li.list_item_type:first"); 

Aussi, utilisez toujours un sélecteur de balises (« de ul.list ») sur un sélecteur de classe nue (le « .list ») lorsque cela est possible. Il est beaucoup plus rapide sur la plupart des navigateurs.

Answer 3

Vous étiez si près!

Au lieu de find(), qui recherche tous les descendants, utilisez children(), qui recherche uniquement les enfants.

Test: http://jquery.nodnod.net/cases/723/run