Quel code jQuery est le plus efficace?

Question

Sur curiousty qui du code ci-dessous est plus efficace (si non plus, quelle serait la meilleure façon?)

Backstory - Construire un petit carrousel d'image et le code en question a à voir avec les contrôles (prev, pause/lecture, suivant)

<ul class="controls"> 
    <li> <a href="#" class="prev"> Previous Image </a> </li> 
    <li> <a href="#" class="pause"> Pause   </a> </li> 
    <li> <a href="#" class="next"> Next Image  </a> </li> 
</ul> 

// inside document.ready() 
$(".controls a").click(function() { 
    var cur_class = $(this).attr("class"); 

    if (cur_class == "pause") { 
     // do something 
    } else if (cur_class == "prev") { 
     // do something 
    } else if (cur_class == "next") { 
     // do something 
    } 
)}; 

// OR THIS 
$(".controls a.prev").click(function() { /* do something */ }); 
$(".controls a.pause").click(function() { /* do something */ }); 
$(".controls a.next").click(function() { /* do something */ }); 

Merci M.

Answer 1

La meilleure option consiste à utiliser .delegate(). C'est un nouvel événement ajouté à jQuery 1.4.2 et c'est bien mieux que d'utiliser click. .click() ajoute un nouvel événement pour chaque balise d'ancrage.

.delegate() 'attend' qu'un clic (ou un événement spécifié) soit effectué avant d'ajouter un nouvel événement (pour l'élément cliqué spécifique uniquement).

$(".controls").delegate("a", "click", function() { 

    var cur_class = $(this).attr("class"); 

    if (cur_class == "pause") { 
     // do something 
    } else if (cur_class == "prev") { 
     // do something 
    } else if (cur_class == "next") { 
     // do something 
    } 

} 

Note: le code n'a pas été testé, lisez les informations .delegate() dans la documentation jQuery pour plus d'informations.

Peut-être que vous devez ajouter un identifiant à la <ul>:

(<ul class="controls" id="ul_id">), puis utiliser $("#ul_id").delegate("a", "click", function() {/... }.

Espérons que ça aide.

Answer 2

Je pense que ce qui suit est le moyen le plus rapide. Il ne récupèrera que DOM nodeList une fois les filtres au lieu d'aller chercher trois fois

$('.controls a') 
.filter('.prev') 
.click(function(){/*...*/}) 
.end() 
.filter('.pause') 
.click(function(){/*...*/}) 
.end() 
.filter('.next') 
.click(function(){/*...*/}); 

Answer 3

Presque pas de différence. Comme votre bâtiment carrousel le grand goulot d'étranglement sera les images que vous chargez.