Traverser l'ancre, la liste non triée, et les éléments de sous-liste avec Jquery

J'apprends JQuery et j'essaye de comprendre comment analyser une liste non triée. Mon script fonctionne et il peut surligner en sous-liste jaune (cliquez sur "niveau 2C" et ancre 2d), mais je suis incapable de mettre en évidence seulement niveau 3 ou seulement 4.Traverser l'ancre, la liste non triée, et les éléments de sous-liste avec Jquery

Tout indice sur la façon de faire cela? Merci.

Voici mon code:

<script type="text/javascript" language="JavaScript"> 
    $(document).ready(function(){ 

     $(".level2").click(function(){ 
      $(this).next("ul").css("background", "yellow"); 
      }); 

    });

<div > 
    <ul> 
    <li ><a class="level1">Level 1</a> 
     <ul> 
     <li><a class="level2" href="#">Level 2a</a></li> 
     <li><a class="level2" href="#">Level 2b</a></li> 
     <li><a class="level2">Level 2c</a> 
      <ul> 
      <li><a class="level3" href="#">Level 3a</a></li> 
      <li><a class="level3">Level 3b</a> 
       <ul> 
       <li><a class="level4">Level 4a</a></li> 
       <li><a class="level4">Level 4b</a></li> 
       </ul> 
      </li> 
      <li><a class="level3">Level 3c</a> 
       <ul> 
       <li><a class="level4">Level 4c</a></li> 
       <li><a class="level4">Level 4d</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     <li><a class="level2">Level 2d</a> 
      <ul> 
      <li><a class="level3" href="#">Level 3c</a></li> 
      <li><a class="level3">Level 3d</a> 
       <ul> 
       <li><a class="level4" href="#">Level 4e</a></li> 
       <li><a class="level4" href="#">Level 4f</a></li> 
       </ul> 
      </li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</div>

Désolé, je suis Français!

Source

2010-10-20 Jim D

4 est imbriqué dans 3 donc il est difficile de dire exactement ce que vous voulez dire en sélectionnant "seulement" 3, car en sélectionnant 3, vous sélectionnez automatiquement 4. –

Bonjour, Peter. J'apprends donc, j'essaie de comprendre comment fonctionne la traversée. Ma première idée était de cliquer sur l'un des ancres de «niveau 2» et de mettre en évidence tous les enfants de «niveau 4». Mais je ne sais pas comment coder que je veux atteindre le prochain UL ul. –

affecter le gestionnaire des <a> éléments en utilisant l'attribute-starts-with selector où l'attribut nom de la classe commence par level, puis assurez-vous que l'événement ne bouillonne pas par calling e.stopPropagation().

Exemple:http://jsbin.com/upuho3/3

$("a[class^=level]").click(function(e){ 
     $(this).next("ul").css("background", "yellow"); 
     e.stopPropagation(); 
    });

EDIT: Si vous voulez effacer les sélections précédentes, vous pouvez placer et ID sur le conteneur <div>, et l'utiliser to .find() les <ul> imbriqués éléments, et les réinitialiser avant de sélectionner le courant.

Exemple:http://jsbin.com/upuho3/4

$("a[class^=level]").click(function(e){ 
    $('#top').find("ul").css("background", ""); 
    $(this).next("ul").css("background", "yellow"); 
    e.stopPropagation(); 
});

HTML

<div id="top"> 
    <ul> 
    <li ><a class="level1">Level 1</a> 
    ...

Je suggère d'utiliser des cours avec jQuery's .addClass() method au lieu d'utiliser the .css() method bien.

EDIT:e.stopPropagation() ne devrait vraiment pas être nécessaire car l'événement click est sur l'élément <a> et en tant que tel, il ne déclenche pas l'ancêtre <a> éléments.

Source

2010-10-20 16:30:15 user113716

Merci beaucoup Patrick, solution très élégante. Je suis coincé avec cette syntaxe: "a [class^= level]". Y a-t-il une page sur le site de jquery à propos de^=? –

@Jim D - Ah oui, il me manque quelques liens de documentation dans ma réponse. Je vais mettre à jour. Celui que vous demandez est [l'attribut-starts-with selector] (http://api.jquery.com/attribute-starts-with-selector/). – user113716

Très utile chapitre sur l'attribut. Je vous remercie. Je vais essayer maintenant de ne mettre en évidence que le "next ul next ul" (niveau 2 cliquez sur mettre en évidence les enfants du niveau 4). Pas facile pour moi. –

Traverser l'ancre, la liste non triée, et les éléments de sous-liste avec Jquery

Répondre

Questions connexes