Obtenir une étiquette suivante dans l'arborescence ul imbriquée

Question

J'ai une liste non ordonnée imbriquée représentant une hiérarchie d'arborescence. Il peut y avoir plusieurs tags ul profondément imbriqués dans la liste non ordonnée. Exemple très simple:

<ul> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="allowed">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="disallowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</ul> 

Comme vous pouvez le voir, certains liens peuvent avoir une classe "autorisé". Quand un lien comme celui-ci est cliqué, je voudrais obtenir une balise suivante dans l'arbre et si elle a la classe "disallowed", changez-la en "allowed". Comment puis-je obtenir le prochain tag dans l'arborescence?

MISE À JOUR:

Ce que je veux dire. Avant:

<ul> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="allowed">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class="allowed">Link</a><!-- this gets clicked on --> 
     <ul> 
      <li><a href="#" class="disallowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</ul> 

changements HTML à ceci:

<ul> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="allowed">Link</a></li> 
     </ul> 
    </li> 
    <li><a href="#" class="allowed">Link</a> 
     <ul> 
      <li><a href="#" class="allowed">Link</a></li> 
      <li><a href="#" class="disallowed">Link</a></li> 
     </ul> 
    </li> 
</ul> 

Et ainsi de suite.

Answer 1

$('.allowed').live(function() { 
    var links= $('a'); 
    var ix= links.index(this); 
    if (ix!==-1 && ix<links.length-1) 
     links.eq(ix+1).removeClass('disallowed').addClass('allowed'); 
}); 

• celui-ci utilise live() pour attraper les clics, en supposant que, après, après un lien est changé en class="allowed", en cliquant qui doit effectuer la même action

• il recherche le lien suivant sur toute la page. Si vous voulez seulement vérifier à l'intérieur d'un conteneur particulier, utilisez cela comme parent pour trouver des liens, par exemple. var links= $('#myul a');, pour l'efficacité et pour éviter que cela affecte les autres pages liens

Answer 2

vous pourriez faire quelque chose comme

$('a.allowed').click(function(){ 
    $(this).next().find('a:first').attr('class', 'allowed'); 
}); 

cela fera toutes les balises un sous ul à côté du lien qui a été cliqué une classe allowed.

Answer 3

$(document).ready(function() { 
     var el = null; 
     $('ul li a.allowed').click(function(){ 
     el = $(this); 
     while($(el).closest('.ul')){ 
      el = $(el).closest('.ul'); 
      var a = $(el).find('li a.disallowed:first'); 
      if(a){ 
      $(a).removeclass('disallowed').addClass('allowed'); 
      return true; 
      } 
     } 
    }); 
}); 

Answer 4

$(function(){ 
    $('ul li a').click(function(){ 
     if ($(this).is('.allowed')) { 
      var nextElem = $(this).next('ul').length?$(this).next('ul'):$(this).closest('li').next('li'); 
      nextElem.find('a:first'). 
       filter(function(){ 
        return $(this).is('.disallowed'); 
       }). 
       removeClass('disallowed'). 
       addClass('allowed'); 
     } 
     return false; 
    }); 
}); 

Ouf! demo