Wie wird ein Ereignis mit jquery selector zu mehreren Elementen hinzugefügt?

Question

Angenommen, ich habe das folgende Markup:

<ul> 
    <li class="one"></li> 
    <li class="one"></li> 
    <li class="one"></li> 
</ul> 

ich die Folowing jquery hinzufügen Onclick Funktion perfprm:

$(".one").click(function(){ 
     var text = this.innerHTML; 
     alert(text); 

    }) 

Die Klick-Funktion für alle drei li Elemente zugeordnet ist. Usual in Javascript document.getElementsByClassName("one").myprop würde das erste Element mit Klassenname one 's Eigenschaft myprop zurückgeben. Entsprechend, wenn ich einen Ereignis-Listener zu document.getElementsByClassName("one") hinzufügen, wird das Ereignis an das erste Element mit dem Klassennamen one angefügt. Z.B.

var one = document.getElementsByClassName("one"); 
one.addEventListener("click", function(){ 
    alert(); 
}); 

verursacht Alarm poup angezeigt werden, wenn erste li Element geklickt wird.

In ähnlicher Weise sollte jquery die Funktion nur dem ersten Element mit dem Klassennamen one zuweisen.

Wie also weist jquery allen Elementen mit dem Klassennamen one eine Funktion zu?

Answer 1

von MDN Genommen

Javascript ‚getElementsByClassName‘ gibt ein Array-ähnliches Objekt von alle untergeordneten Elemente, die alle angegebenen Klassennamen haben.

Sie werden also nicht nur ein Ergebnis erhalten. Fast das gleiche in Ihrer Probe, $('.one') tut einfach das Gleiche.

Und um das erste Element der zurückgegebenen Elemente zu erhalten, können Sie verwenden;

var $jQueryObject = $('.one').eq(0); 
// 
var domElem = $('.one').get(0); 

Also, wenn Sie wollen einfach nur die Event-Handler zum ersten zuweisen, können Sie tun;

$(".one").eq(0).click(function(){ 
    var text = this.innerHTML; 
    alert(text); 
}) 

Answer 2

Wie funktioniert zuweisen jquery eine Funktion auf alle Elemente mit Klasse Namen ein?

Der ursprüngliche Selektor ist eine Sammlung aller zu jQuery() bestanden ".one" Elemente

In der ersten Formulierung oben aufgeführten jQuery() - auch als $() geschrieben werden können, - durchsucht die DOM für jedem Elemente , die mit dem angegebenen Selektor übereinstimmen und ein neues jQuery-Objekt erstellen, das auf diese Elemente verweist:

$("div.foo"); 

Hervorhebungen auf "jede".

.one() nennt .on()

function one(types, selector, data, fn) { 
    return this.on(types, selector, data, fn, 1); 
} 

die .each() bei Original-Auswahl Ereignis zu jedem Element befestigen ruft $(".one")

return this.each(function() { 
    jQuery.event.add(this, types, fn, data, selector); 
}); 

Answer 3

In jQuery können Sie :nth-child(0) oder :eq(1) verwenden, um erste Klasse zu zeigen. Intern erhält es alle Elemente als Liste und wenn Sie (0) geben, bedeutet das index=0. Im Fall von :nth-child() Index beginnt von 0, während in :eq() Index beginnt mit 1.

Das JavaScript getElementsByClassName macht das gleiche.

Beispiel:

$("button").click(function() { 
 
    //alert($(".one:nth-child(1)").text()); 
 
    alert($(".one:eq(0)").text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul> 
 
    <li class="one">A</li> 
 
    <li class="one">B</li> 
 
    <li class="one">C</li> 
 
</ul> 
 

 
<button>Click</button>

Answer 4

Die getElementsByClassName() Methode liefert eine Auflistung aller Elemente in dem Dokument mit dem angegebenen Klassennamen als NodeList Objekt.

Das NodeList-Objekt stellt eine Sammlung von Knoten dar. Auf die Knoten kann über Indexnummern zugegriffen werden. Der Index beginnt bei 0te.

get(0) wird Ihr Problem lösen.

Die Methode get() ruft die vom Selektor angegebenen DOM-Elemente ab.

Für weitere Informationen können Sie sich beziehen question.

Siehe auch doc

$('.one').get(0).click(function() 
{ 
    var text = this.innerHTML; 
    alert(text); 
}) 

Answer 5

Hier ist die Antwort mit jsfiddle Ruft die Zeichenfolge innerhalb des li Element

[https://jsfiddle.net/yxdg86f4/][1] 

Answer 6

Wie pro Ihre Anforderung "jquery sollte die Funktion nur auf den ersten zuweisen Element mit dem Klassennamen eins "Hier ist der Code, der hilfreich sein kann.

<script> 
    $(function(){ 
     $("li.one:first-child").on("click",function(){ 
     /*Your actions go here*/ 
     var text =$(this).html(); 
     alert(text); 
     }); 
    });