Jquery выберите все элементы, которые имеют $jquery.данные()
выберите элементы, которые я ранее установил с jquery.data();
т. е. выберите все элементы с .data('myAttr')
уже был установлен.
решение
jsfiddle для демострации - это Скрипка
7 ответов:
вы могли бы сделать
$('[data-myAttr!=""]');
этот выбирает все элементы, которые имеют атрибут
data-myAttr
который не равен " (поэтому он должен быть установлен);вы также можете использовать filter ()
$('*').filter(function() { return $(this).data('myAttr') !== undefined; });
лучший и простой способ выбрать их:
$('[data-myAttr]')
Дополнительная Информация:
Я проверил много вещей.
используя
$('[data-myAttr!=""]')
не работает для всех случаев. Потому что элементы, которые не имеютdata-myAttr
установить полеdata-myAttr
равнаundefined
и$('[data-myAttr!=""]')
также будут выбраны те, что неверно.
можно использовать filter ():
var elements = $("*").filter(function() { return $(this).data("myAttr") !== undefined; });
вы можете использовать это расширение jQuery селектор: запрос данных элемент
$(':data'); // All elements with data $(':not(:data)'); // All elements without data
вы можете использовать jQuery UI с :данные() селектор
выбирает элементы, данные которых хранятся под указанным ключом.
Регистрация этот jsfiddle
чтобы получить все элементы, соответствующие
.data('myAttr')
можно использоватьvar matches = $(':data(myAttr)');
это должно работать для обоих элементов с
data-
атрибуты и элементы с данными, хранящимися с помощью$.data()
, потому чтоначиная с jQuery 1.4.3 HTML 5 data - атрибуты будут автоматически втягиваться в объект данных jQuery.
но это не очень хорошо. Проверьте этот jsfiddle и вы увидите, что при втором вызове селектора он должен соответствовать 2 элементам и соответствует только одному. Это связано с" ошибкой " в библиотеке jQuery-ui.
это взято из основного файла jquery-ui.
$.extend( $.expr[ ":" ], { data: $.expr.createPseudo ? $.expr.createPseudo(function( dataName ) { return function( elem ) { return !!$.data( elem, dataName ); }; }) : // support: jQuery <1.8 function( elem, i, match ) { return !!$.data( elem, match[ 3 ] ); } });
как вы можете видеть, что они используют
$.data(elem, match)
вместо$(elem).data(match)
что приводит к тому, что кэш не обновляется в случае, если вы запрашиваете элементы сdata-
атрибуты. Если элемент был протестирован наdata()
хранение это работает хорошо, но если нет, то он не будет включен в результирующие матчи.это может быть не ошибка вообще, если то, что вы хотите, чтобы соответствовать только элементы с данными информации, установленной вами, но если нет, вы остались с двумя вариантами.
не используйте jquery-ui и расширьте свой собственный псевдо-селектор
$(:mydata(myAttr))
$.extend($.expr[":"], { mydata: $.expr.createPseudo ? $.expr.createPseudo(function(dataName) { return function(elem) { return !!$(elem).data(dataName); }; }) : function(elem, i, match) { return !!$(elem).data(match[3]); } });
// pseudoselector code $.extend($.expr[":"], { mydata: $.expr.createPseudo ? $.expr.createPseudo(function(dataName) { return function(elem) { return !!$(elem).data(dataName); }; }) : function(elem, i, match) { return !!$(elem).data(match[3]); } }); // end pseudoselector testSelector = function() { var matched = $(':mydata(test)'), results = $('#results'); results.append('<div>You matched ' + matched.length + ' elements</div>'); matched.css('border', 'black 3px solid'); console.log(matched); console.log('You matched ' + matched.length + ' elements'); }; testSelector(); $('#addData').click(function() { $(".bar").data('test', 'value2'); testSelector(); });
.foo { background-color: red; color: white; } .bar { background-color: blue; color: white; } #addData { margin-top: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <span class="bar">without data attribute</span> <span class="foo" data-test="value1">with data attribute</span> </div> <button id="addData" type="button">Add data</button> <div id="results"></div>
используйте jQuery-ui с
:data
псевдоселектор и присоединиться к результатам выбора[data-myAttr]
чтобы включить те, которые могут быть пропущеныvar matches = $(':data(myAttr)', '[data-myAttr]')
testSelector = function() { var matched = $(':data(test), [data-test]'), results = $('#results'); results.append('<div>You matched ' + matched.length + ' elements</div>'); matched.css('border', 'black 3px solid'); console.log(matched); console.log('You matched ' + matched.length + ' elements'); }; testSelector(); $('#addData').click(function() { $(".bar").data('test', 'value2'); testSelector(); });
.foo { background-color: red; color: white; } .bar { background-color: blue; color: white; } #addData { margin-top: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div> <span class="bar">without data attribute</span> <span class="foo" data-test="value1">with data attribute</span> </div> <button id="addData" type="button">Add data</button> <div id="results"></div>
выберите элементы, которые я ранее установил сjquery.data();
вопрос в том, чтобы найти все элементы с определенным ключом, а не любые данные.
попробуйте использовать
jQuery.data()
$(".myClass").each(function(i){ if( i % 2 == 0 ){ $(this).data("myAttr",i + 1); } }); var res = $(".myClass").map(function(i) { console.log($(this).data("myAttr")); return $.data(this, "myAttr") !== undefined ? this : null }); console.log(res);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="myClass">1</div> <div class="myClass">2</div> <div class="myClass">3</div> <div class="myClass">4</div> <div class="myClass">5</div>
jsfiddle http://jsfiddle.net/xynZA/142/