jQuery Wie finde ich ein Element basierend auf einem Datenattributwert?

994

Ich habe das folgende Szenario:

var el = 'li';

und es gibt 5 <li>auf der Seite mit jeweils einem data-slide=numberAttribut (Nummer ist 1,2,3,4,5) .

Ich muss jetzt die aktuell aktive Foliennummer finden, die var current = $('ul').data(current);bei jedem Folienwechsel zugeordnet und aktualisiert wird.

Bisher waren meine Versuche erfolglos und ich habe versucht, den Selektor zu erstellen, der der aktuellen Folie entspricht:

$('ul').find(el+[data-slide=+current+]);

stimmt mit nichts überein / gibt nichts zurück…

Der Grund, warum ich das liTeil nicht fest codieren kann, ist, dass dies eine vom Benutzer zugängliche Variable ist, die bei Bedarf in ein anderes Element geändert werden kann, sodass es möglicherweise nicht immer eine ist li.

Irgendwelche Ideen, was mir fehlt?

Jannis
quelle
6
Sind Sie sicher, .find(el+[data-slide=+current+]);dass der Code, den Sie schreiben , in Ihrem Code enthalten ist? es scheint, dass Sie einige Zitate zu"[data-slide]"
xandy
Das hat mir geholfen, alle Datenattribute auszuwählen (unabhängig vom Wert): $('*[data-slide]')Sie können es mit zB$('*[data-slide]').each( function() { ... });
Kai Noack

Antworten:

1481

Sie müssen den Wert von currentin einen Attribut-Gleichheits- Selektor einfügen :

$("ul").find(`[data-slide='${current}']`)

Für ältere JavaScript-Umgebungen ( ES5 und früher):

$("ul").find("[data-slide='" + current + "']"); 
Frédéric Hamidi
quelle
8
@Jannis, du könntest es tun $("ul").find(el + "[data-slide='" + current +"']");.
Frédéric Hamidi
7
@ c00lryguy, jQuery UI definiert eine, und es gibt eigenständige Implementierungen . Es scheint, dass Versuche, es zu jQuery Core hinzuzufügen, abgelehnt wurden . Zweimal .
Frédéric Hamidi
6
Diese Antwort auf einen ähnlichen Beitrag hat ein Beispiel für die Filterfunktion
drzaus
77
Ich mache mir Sorgen, dass dies nicht funktioniert, wenn Daten über die Funktion jQuery .data (...) hinzugefügt wurden, da dies nicht immer ein Attribut rendert und soemtimes einen browserspezifischen Speichermechanismus verwendet. Ein weiterer Grund, warum ich mir wünsche, dass der jQuery-Kern einen datenspezifischen Selektor hat.
AaronLS
77
Beachten Sie, dass dies nicht für Elemente funktioniert, bei denen Sie Daten mit $ ('# element'). Data ('some-att-name', value) festlegen. aber nur für diejenigen mit fest codierten Attributen. Ich habe dieses Problem und damit es funktioniert, setze Daten, indem ich das Attribut direkt schreibe $ ('# element'). Attr ('data-some-att-name', value);
Pawel
463

Falls Sie das alles nicht eingeben möchten, haben Sie eine kürzere Möglichkeit, nach Datenattributen abzufragen:

$("ul[data-slide='" + current +"']");

Zu Ihrer Information: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/

KevinDeus
quelle
31
Für diejenigen unter Ihnen, die sich interessieren, wird der <ul><li data-slide="item"></li></ul>Selektor dieser Antwort angesichts der Struktur undefiniert zurückgegeben, sodass er angesichts des Szenarios des Benutzers nicht funktioniert. Diese Antwort wird für die Struktur funktionieren. <ul data-slide="item"><li></li></ul> Obwohl ich verstehe, warum sie aufgrund der Kürze beliebt ist, ist sie technisch eine falsche Antwort. jsfiddle.net/py5p2abL/1
akousmata
4
Vergessen Sie nicht, es als Array zu behandeln. Verwenden Sie [0]diese Option, um auf das erste gefundene Element zuzugreifen.
Aminah Nuraini
Ein bizarrer Nebeneffekt ... diese Methode hat das Element mit dem Datenattribut abgeglichen, wenn das .find("[data-attrib='value']")nicht funktioniert hat. Ich weiß nicht, ob die Werte
Datenattribute
1
Es ist nicht bizarr, weil die beiden Antworten zwei verschiedene Dinge tun. Findet$.find speziell die Nachkommen dieses Elements, aber wenn Sie die Filtersyntax in der Auswahlzeichenfolge verwenden, werden die Ergebnisse einfach gefiltert.
Phil
227

Achten Sie bei der Suche mit [data-x = ...] darauf, dass dies mit dem Setter jQuery.data (..) nicht funktioniert :

$('<b data-x="1">'  ).is('[data-x=1]') // this works
> true

$('<b>').data('x', 1).is('[data-x=1]') // this doesn't
> false

$('<b>').attr('data-x', 1).is('[data-x=1]') // this is the workaround
> true

Sie können dies stattdessen verwenden:

$.fn.filterByData = function(prop, val) {
    return this.filter(
        function() { return $(this).data(prop)==val; }
    );
}

$('<b>').data('x', 1).filterByData('x', 1).length
> 1
psycho brm
quelle
1
das $.fn.filterByDataist genial; aber dies ist eine Warnung für die Kopie-Pasters da draußen ... Sie brauchen nur $('<b>').filterByData('x', 1)zu finden <b>Tags mit data-x="1". Wenn Sie den .data(x, 1)Teil kopieren und einfügen ... setzen Sie ihn data-xvor dem Filtern auf "1".
WEBjuju
39

Ich habe die filterByData-Erweiterung von psycho brm auf jQuery verbessert .

Wenn die frühere Erweiterung nach einem Schlüssel-Wert-Paar gesucht hat, können Sie mit dieser Erweiterung zusätzlich nach dem Vorhandensein eines Datenattributs suchen, unabhängig von dessen Wert.

(function ($) {

    $.fn.filterByData = function (prop, val) {
        var $self = this;
        if (typeof val === 'undefined') {
            return $self.filter(
                function () { return typeof $(this).data(prop) !== 'undefined'; }
            );
        }
        return $self.filter(
            function () { return $(this).data(prop) == val; }
        );
    };

})(window.jQuery);

Verwendungszweck:

$('<b>').data('x', 1).filterByData('x', 1).length    // output: 1
$('<b>').data('x', 1).filterByData('x').length       // output: 1

Oder die Geige: http://jsfiddle.net/PTqmE/46/

bPratik
quelle
34

Ohne JQuery, ES6

document.querySelectorAll(`[data-slide='${current}']`);

Ich weiß, dass es sich bei der Frage um JQuery handelt, aber die Leser möchten möglicherweise eine reine JS-Methode.

Rap-2-h
quelle
33

Ich habe das gleiche Problem beim Abrufen von Elementen mit jQuery und dem data- * -Attribut festgestellt.

Als Referenz finden Sie hier den kürzesten Code:

Dies ist mein HTML-Code:

<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>

Dies ist mein jQuery-Selektor:

$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.
user1378423
quelle
19
$("ul").find("li[data-slide='" + current + "']");

Ich hoffe das funktioniert besser

Vielen Dank

Jomin George Paul
quelle
15

Dieser Selektor $("ul [data-slide='" + current +"']");funktioniert für folgende Struktur:

<ul><li data-slide="item"></li></ul>  

Während dies $("ul[data-slide='" + current +"']");funktioniert für:

<ul data-slide="item"><li></li></ul>

Matas Vaitkevicius
quelle
12

Zurück zu seiner ursprünglichen Frage, wie dies funktioniert, ohne den Elementtyp im Voraus zu kennen, geschieht Folgendes:

$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
Bryan Garaventa
quelle