jQuery-Slicing und Klickereignisse

Question

Dies ist wahrscheinlich eine wirklich einfache jQuery-Frage, aber ich konnte sie nach 10 Minuten in der Dokumentation nicht beantworten, also ...

Ich habe eine Liste mit Kontrollkästchen und kann sie mit dem Selektor abrufen 'input[type=checkbox]'.Ich möchte, dass der Benutzer bei gedrückter Umschalttaste klicken und eine Reihe von Kontrollkästchen auswählen kann.Um dies zu erreichen, muss ich den Index eines Kontrollkästchens in der Liste abrufen, damit ich diesen Index übergeben kann .slice(start, end).Wie erhalte ich den Index, wenn der Benutzer auf ein Feld klickt?

Answer 1

Der folgende Selektor sollte auch in jQuery funktionieren: input:checkbox.

Anschließend können Sie die Zeichenfolge aneinanderreihen :gt(index) Und :lt(index) Filter zusammen, wenn Sie also das 5. bis 7. Kontrollkästchen möchten, verwenden Sie input:checkbox:gt(4):lt(2).

Um den Index des aktuell angeklickten Kontrollkästchens zu erhalten, verwenden Sie einfach $("input:checkbox").index($(this)).

Answer 2

Dies ist eine schnelle Lösung, aber ich würde jedem Kontrollkästchen eine eindeutige ID geben, vielleicht mit einem Indexhinweis, etwa so:

<input id="checkbox-0" type="checkbox" />
<input id="checkbox-1" type="checkbox" />
<input id="checkbox-2" type="checkbox" />
<input id="checkbox-3" type="checkbox" />
<input id="checkbox-4" type="checkbox" />

Den Index können Sie dann ganz einfach abrufen:

$(document).ready(function() {
  $("input:checkbox").click(function() {
    index = /checkbox-(\d+)/.exec(this.id)[1];
    alert(index);
  });
});

Answer 3

Danke für die Antwort, Samjudson.

Nach weiteren Experimenten habe ich herausgefunden, dass man es sogar einfach verwenden kann $(':checkbox') um sie auszuwählen.Es ist interessant, dass Sie das verwenden können .slice() Funktion, um den Bereich zu erhalten, aber Sie haben auch die Möglichkeit, dies im Selektor mit zu tun :gt Und :lt.Ich finde die Syntax von .slice() ist jedoch sauberer als die Verwendung der Auswahlfilter.

Ich muss sagen, dass mir die Lösung von Ryan Duffield nicht so gut gefällt, da sie Änderungen am Markup erfordert und das Wiederholen von Code erfordert.

Answer 4

@Gorgapor:Ich denke, ich muss Fragen manchmal etwas weniger wörtlich nehmen.:-) Ich dachte, Sie wären darauf beschränkt, eine Art Index zu benötigen.Ich denke jedoch, dass Sie feststellen werden, dass Sie solche Dinge normalerweise nicht mehr tun müssen, wenn Sie jQuery häufiger verwenden.