Ich habe das folgende Szenario:
var el = 'li';
und es gibt 5 <li>
auf der Seite mit jeweils einem data-slide=number
Attribut (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 li
Teil 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?
.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]"
$('*[data-slide]')
Sie können es mit zB$('*[data-slide]').each( function() { ... });
Antworten:
Sie müssen den Wert von
current
in einen Attribut-Gleichheits- Selektor einfügen :Für ältere JavaScript-Umgebungen ( ES5 und früher):
quelle
$("ul").find(el + "[data-slide='" + current +"']");
.Falls Sie das alles nicht eingeben möchten, haben Sie eine kürzere Möglichkeit, nach Datenattributen abzufragen:
Zu Ihrer Information: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/
quelle
<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[0]
diese Option, um auf das erste gefundene Element zuzugreifen..find("[data-attrib='value']")
nicht funktioniert hat. Ich weiß nicht, ob die Werte$.find
speziell die Nachkommen dieses Elements, aber wenn Sie die Filtersyntax in der Auswahlzeichenfolge verwenden, werden die Ergebnisse einfach gefiltert.Achten Sie bei der Suche mit [data-x = ...] darauf, dass dies mit dem Setter jQuery.data (..) nicht funktioniert :
Sie können dies stattdessen verwenden:
quelle
$.fn.filterByData
ist 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 mitdata-x="1"
. Wenn Sie den.data(x, 1)
Teil kopieren und einfügen ... setzen Sie ihndata-x
vor dem Filtern auf "1".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.
Verwendungszweck:
Code-Snippet anzeigen
Oder die Geige: http://jsfiddle.net/PTqmE/46/
quelle
Ohne JQuery, ES6
Ich weiß, dass es sich bei der Frage um JQuery handelt, aber die Leser möchten möglicherweise eine reine JS-Methode.
quelle
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:
Dies ist mein jQuery-Selektor:
quelle
Ich hoffe das funktioniert besser
Vielen Dank
quelle
Dieser Selektor
$("ul [data-slide='" + current +"']");
funktioniert für folgende Struktur:Während dies
$("ul[data-slide='" + current +"']");
funktioniert für:<ul data-slide="item"><li></li></ul>
quelle
Zurück zu seiner ursprünglichen Frage, wie dies funktioniert, ohne den Elementtyp im Voraus zu kennen, geschieht Folgendes:
quelle