C'è un modo più breve per scrivere questo copione? (Targeting più elementi per eseguire la stessa funzione)

Question

Così ho questa bella sceneggiatura slider che voglio usare in questa pagina: http://tuscaroratackle.com/rods per le diverse istanze sulla pagina. (In altre parole ogni registrazione asta avrà un proprio dispositivo di scorrimento, per un totale di circa 11 cursori sulla pagina)

Al fine di eseguire lo script che devo includere questo dichiarazione di funzione:

$(document).ready(function(){   
    $("#rod-slider1").easySlider();
     $("#rod-slider2").easySlider();
     $("#rod-slider3").easySlider();
     $("#rod-slider4").easySlider();
     $("#rod-slider5").easySlider();
     $("#rod-slider6").easySlider();
     $("#rod-slider7").easySlider();
     $("#rod-slider8").easySlider();
     ...etc...
  });

Quindi la domanda qui (è una domanda jQ niubbo lo so) è Posso combinare quelle linee in una sola con l'aggiunta di tutti i selettori di ID nella prima funzione? E se sì, quale sarebbe il formato corretto per la scrittura in questo modo?

Answer 1

È anche possibile utilizzare una classe:

$(document).ready(function(){   
    $(".rod-slider").easySlider();
});

Il cursore verrà ora applicata a tutti / elementi aventi la rod-slider classe.

Se vuoi / necessità di utilizzare gli ID, è possibile farlo separandoli con una virgola:

$(document).ready(function(){   
    $("#rod-slider1, #rod-slider2, #rod-slider3, #etc").easySlider();
});

In alternativa, è possibile utilizzare la metodo add .

Se non si desidera modificare voi HTML corrente, è possibile utilizzare il starts with selettore :

$(document).ready(function(){   
    $("[id^='rod-slider']").easySlider();
});

Answer 2

È possibile utilizzare la starts-with selettore

$(document).ready(function(){   
     $("[id^='rod-slider']").easySlider();
  });

Questo si traduce per selezionare tutti gli elementi che hanno un id attributo che inizia con biella-cursore

È possibile migliorare le prestazioni di questo se si conosce il nome del tag è lo stesso per tutti gli elementi. Per esempio, se sono tutti i div si potrebbe scrivere come

$("div[id^='rod-slider']").easySlider();

per migliorare le prestazioni ..

Answer 3

$(".rodslider").easySlider(); 

Where "rodslider" is a class and not an id selector. 

Answer 4

Date loro tutto una classe comune, quindi utilizzare un .class selettore , in questo modo:

$(function(){   
  $(".rod-slider").easySlider();
});

Answer 5

È possibile aggiungere una classe e selezionare tutti insieme. Per esempio se sono DIV si può solo fare in questo modo

<div class="rodslider"></div>

e

$(document).ready(function(){   
    $("div.rodslider").easySlider();
});

Answer 6

Si potrebbe fare:

$(document).ready(function(){
    for (var i = 1; i <= 8; i++) {
        $("#rod-slider" + i).easySlider();
    }
});

o semplicemente utilizzare il selettore di classe ...

$(document).ready(function(){
    $(".rod-slider").easySlider();
});