Mam następujący scenariusz:
var el = 'li';
a na stronie znajduje się 5 <li>
z data-slide=number
atrybutem (odpowiednio 1,2,3,4,5) .
Teraz muszę znaleźć numer aktywnego slajdu, który jest mapowany var current = $('ul').data(current);
i aktualizowany przy każdej zmianie slajdu.
Do tej pory moje próby zakończyły się niepowodzeniem, próbując skonstruować selektor pasujący do bieżącego slajdu:
$('ul').find(el+[data-slide=+current+]);
nic nie pasuje / nie zwraca…
Powodem, dla którego nie mogę na stałe zakodować li
części, jest to, że jest to zmienna dostępna dla użytkownika, którą w razie potrzeby można zmienić na inny element, więc nie zawsze może to być li
.
Jakieś pomysły na to, czego mi brakuje?
.find(el+[data-slide=+current+]);
kodzie jest kod, który piszesz? wygląda na to, że przegapiłeś kilka cytatów z"[data-slide]"
$('*[data-slide]')
Możesz go używać np. Z$('*[data-slide]').each( function() { ... });
Odpowiedzi:
Musisz wprowadzić wartość
current
do selektora Attribute Equals :W przypadku starszych środowisk JavaScript ( ES5 i wcześniejszych):
źródło
$("ul").find(el + "[data-slide='" + current +"']");
.w przypadku, gdy nie chcesz wpisywać tego wszystkiego, oto krótszy sposób na zapytanie według atrybutu danych:
FYI: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/
źródło
<ul><li data-slide="item"></li></ul>
selektor odpowiedzi zwróci niezdefiniowany, więc nie będzie działał, biorąc pod uwagę scenariusz użytkownika. Ta odpowiedź DZIAŁA dla struktury<ul data-slide="item"><li></li></ul>
Chociaż rozumiem, dlaczego jest popularna ze względu na zwięzłość, jest to technicznie nieprawidłowa odpowiedź. jsfiddle.net/py5p2abL/1[0]
aby uzyskać dostęp do pierwszego znalezionego elementu..find("[data-attrib='value']")
nie działał. Nie wiem, czy wartości to atrybuty danych zostały dodane przez jQuery czy nie ...$.find
konkretnie znajduje potomków tego elementu, ale użycie składni filtru w ciągu selektora po prostu odfiltruje wyniki.Podczas wyszukiwania za pomocą [data-x = ...] uważaj, nie działa z seter jQuery.data (..) :
Możesz użyć tego zamiast:
źródło
$.fn.filterByData
jest znakomity; jest to jednak ostrzeżenie dla kopiujących-pasterów tam ... musisz tylko$('<b>').filterByData('x', 1)
znaleźć<b>
tagidata-x="1"
. jeśli skopiujesz i wkleisz.data(x, 1)
część ...data-x
przed filtrowaniem ustawisz wartość „1”.Poprawiłem rozszerzenie filterByData od psycho brm do jQuery.
Tam, gdzie poprzednie rozszerzenie szukało pary klucz-wartość, za pomocą tego rozszerzenia można dodatkowo wyszukiwać obecność atrybutu danych, niezależnie od jego wartości.
Stosowanie:
Pokaż fragment kodu
Lub skrzypce: http://jsfiddle.net/PTqmE/46/
źródło
Bez JQuery, ES6
Wiem, że pytanie dotyczy JQuery, ale czytelnicy mogą chcieć czystej metody JS.
źródło
Napotkałem ten sam problem podczas pobierania elementów za pomocą jQuery i atrybutu data- *.
więc w celach informacyjnych najkrótszy kod znajduje się tutaj:
To jest mój kod HTML:
To jest mój selektor jQuery:
źródło
Mam nadzieję, że to może działać lepiej
dzięki
źródło
Ten selektor
$("ul [data-slide='" + current +"']");
będzie działał dla następującej struktury:Chociaż
$("ul[data-slide='" + current +"']");
będzie to działać dla:<ul data-slide="item"><li></li></ul>
źródło
Wracając do pierwotnego pytania o to, jak to zrobić, nie znając z góry typu elementu, wykonuje następujące czynności:
źródło