jQuery jak znaleźć element na podstawie wartości atrybutu danych?
Mam następujący scenariusz:
var el = 'li';
I jest 5 <li>
'S na stronie każdy z data-slide=number
atrybutem (liczba jest odpowiednio 1,2,3,4,5) .
Muszę teraz znaleźć aktualnie aktywny numer slajdu, który jest mapowany na var current = $('ul').data(current);
i jest aktualizowany przy każdej zmianie slajdu.
Do tej pory moje próby nie powiodły się, próbując skonstruować selektor, który pasowałby do bieżącego slajdu:
$('ul').find(el+[data-slide=+current+]);
Nie pasuje / return wszystko ...
Powodem, dla którego nie mogę zakodować na twardo li
jest to, że jest to zmienna dostępna dla użytkownika, którą można zmienić na inny element, jeśli jest to wymagane, więc nie zawsze może to być li
.
9 answers
Musisz wprowadzić wartość current
do atrybutu równa się selektor:
$("ul").find(`[data-slide='${current}']`)
Dla starszych środowisk JavaScript (ES5 i wcześniejszych):
$("ul").find("[data-slide='" + current + "']");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-15 07:21:58
Jeśli nie chcesz tego wpisywać, oto krótszy sposób na zapytanie za pomocą atrybutu danych:
$("ul[data-slide='" + current +"']");
FYI: http://james.padolsey.com/javascript/a-better-data-selector-for-jquery/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-15 07:25:04
Podczas wyszukiwania z [data-x=...], uważaj, to nie działa z jQuery.dane(..) setter :
$('<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
Możesz użyć tego zamiast:
$.fn.filterByData = function(prop, val) {
return this.filter(
function() { return $(this).data(prop)==val; }
);
}
$('<b>').data('x', 1).filterByData('x', 1).length
> 1
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-10 12:23:54
Bez JQuery, ES6
document.querySelectorAll(`[data-slide='${current}']`);
wiem, że pytanie dotyczy JQuery, ale czytelnicy mogą chcieć czystej metody JS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-04 20:50:00
Poprawiłem rozszerzenie filterbydata psycho brm do jQuery.
W przypadku, gdy poprzednie rozszerzenie szukało na parze klucz-wartość, za pomocą tego rozszerzenia można dodatkowo wyszukać obecność atrybutu danych, niezależnie od jego wartości.
(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);
Użycie:
$('<b>').data('x', 1).filterByData('x', 1).length // output: 1
$('<b>').data('x', 1).filterByData('x').length // output: 1
// test data
function extractData() {
log('data-prop=val ...... ' + $('div').filterByData('prop', 'val').length);
log('data-prop .......... ' + $('div').filterByData('prop').length);
log('data-random ........ ' + $('div').filterByData('random').length);
log('data-test .......... ' + $('div').filterByData('test').length);
log('data-test=anyval ... ' + $('div').filterByData('test', 'anyval').length);
}
$(document).ready(function() {
$('#b5').data('test', 'anyval');
});
// the actual extension
(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);
//just to quickly log
function log(txt) {
if (window.console && console.log) {
console.log(txt);
//} else {
// alert('You need a console to check the results');
}
$("#result").append(txt + "<br />");
}
#bPratik {
font-family: monospace;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="bPratik">
<h2>Setup</h2>
<div id="b1" data-prop="val">Data added inline :: data-prop="val"</div>
<div id="b2" data-prop="val">Data added inline :: data-prop="val"</div>
<div id="b3" data-prop="diffval">Data added inline :: data-prop="diffval"</div>
<div id="b4" data-test="val">Data added inline :: data-test="val"</div>
<div id="b5">Data will be added via jQuery</div>
<h2>Output</h2>
<div id="result"></div>
<hr />
<button onclick="extractData()">Reveal</button>
</div>
Lub skrzypce: http://jsfiddle.net/PTqmE/46/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:30
Napotkałem ten sam problem podczas pobierania elementów za pomocą atrybutu jQuery i data -*.
Więc dla Twojego odniesienia najkrótszy kod jest tutaj:
To jest mój kod HTML:
<section data-js="carousel"></section>
<section></section>
<section></section>
<section data-js="carousel"></section>
To jest mój selektor jQuery:
$('section[data-js="carousel"]');
// this will return array of the section elements which has data-js="carousel" attribute.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-27 13:40:24
$("ul").find("li[data-slide='" + current + "']");
Mam nadzieję, że to może działać lepiej
Thanks
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-24 14:56:39
Ten selektor $("ul [data-slide='" + current +"']");
będzie działał dla następującej struktury:
<ul><li data-slide="item"></li></ul>
Podczas gdy to $("ul[data-slide='" + current +"']");
będzie działać dla:
<ul data-slide="item"><li></li></ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-02 09:38:08
Wracając do jego pierwotnego pytania, jak to zrobić, aby to działało bez znajomości typu elementu z góry, robi to:
$(ContainerNode).find(el.nodeName + "[data-slide='" + current + "']");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-09 23:58:19