jQuery ciblant des liens spécifiques d'une manière optimale

Question

Note: Ceci est plus d'un meilleur comment plutôt que comment question.

J'ai plusieurs liens dans un ul que je voudrais cibler mais pas tous un seul tag. Même si je sais que je peux cibler chaque élément par ID, j'aimerais savoir quelle est la meilleure pratique (sélection la plus optimisée, plus petite quantité de code) pour cette tâche.

$("#id").find("a").click(function(){ 
    //run function      
});  

balisage:

<nav id="id">  
    <ul> 
    <li id="want-01"><a href="#">link</a></li> 
    <li id="want-02"><a href="#">link</a></li> 
    <li id="want-03"><a href="#">link</a></li> 
    <li id="dont-want-01"><a href="#">link</a></li> 
    <li id="dont-want-02"><a href="#">link</a></li> 
    <li id="want-04"><a href="#">link</a></li> 
    <li id="want-05"><a href="#">link</a></li> 
    </ul>  
</nav> 

Answer 1

L'utilisation d'une classe semble appropriée ici. Créez une nouvelle classe dites 'li_link' et ajoutez-la aux éléments li que vous voulez lier. Appliquez ensuite votre gestionnaire de clics à tous les liens avec la classe, par exemple.

$('.li_link').click(function() {...}); 

Si vous souhaitez modifier les éléments LI gérés de manière dynamique, vous pouvez envisager d'utiliser des événements en direct. Cela vous permet d'ajouter et de supprimer la classe 'li_link' des éléments li et le gestionnaire de clic s'appliquera ou cessera d'être appliqué aux éléments li automatiquement.

Pour mettre en place un événement en direct utiliser quelque chose comme ceci:

$('.li_link').live('click', function() {...}); 

Answer 2

Theres' a vraiment aucun moyen de le faire avec ce HTML, mais si vous implmented un attr rel ou de la classe, vous pouvez sélectionner assez facilement.

<nav id="id">  
    <ul> 
    <li id="want-01" rel="wanted"><a href="#">link</a></li> 
    <li id="want-02" rel="wanted"><a href="#">link</a></li> 
    <li id="want-03" rel="wanted"><a href="#">link</a></li> 
    <li id="dont-want-01"><a href="#">link</a></li> 
    <li id="dont-want-02"><a href="#">link</a></li> 
    <li id="want-04" rel="wanted"> <a href="#">link</a></li> 
    <li id="want-05" rel="wanted"><a href="#">link</a></li> 
    </ul>  
</nav> 

$("#id").find('li[rel=wanted]').children(); 

Answer 3

$("#id").find("a").not("#dont-want-01 a, #dont-want-02 a").click(function(){ 

});