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/