jQuery选择所有具有$ jquery.data（）的元素

Question 1

选择我之前设置的元素 jquery.data();

即选择所有.data('myAttr')已设置的元素。

解

演示的jsfiddle是 Fiddle

Question 2

你可以做

$('[data-myAttr!=""]');

这将选择具有data-myAttr不等于'' 属性的所有元素（因此必须已设置）；

您也可以使用filter（）

$('*').filter(function() {
    return $(this).data('myAttr') !== undefined;
});

Question 3

选择它们的最佳和简单方法是：

$('[data-myAttr]')

更多信息：

我测试了很多东西。

使用$('[data-myAttr!=""]')并非在所有情况下都有效。因为没有一个元素data-myAttr集，都会有自己data-myAttr等于undefined和$('[data-myAttr!=""]')会选择那些为好，这是不正确。

Question 4

您可以使用filter（）：

var elements = $("*").filter(function() {
    return $(this).data("myAttr") !== undefined;
});

Question 5

您可以使用以下jQuery Selector扩展：查询元素数据

$(':data');       // All elements with data  
$(':not(:data)'); // All elements without data

Question 6

您可以将JQuery UI与：data（）选择器一起使用

选择具有存储在指定键下的数据的元素。

查看此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>

展开摘要

Question 7

$('[data-myAttr]').each(function() {
       var element = $(this);
       // Do something with the element
});

Question 8

~~选择我之前设置的元素 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/