Question

选择我之前使用jquery.data();

设置的元素

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

解决方案

要解释的一个方法是 Fiddle

Answer 1

你可以做到

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

这将选择具有属性data-myAttr的所有元素，这些元素不等于＆＃39;＆＃39; （所以必须设置好）;

你也可以使用filter()

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

Answer 2

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

$('[data-myAttr]')

更多信息：

我测试了很多东西。

使用$('[data-myAttr!=""]')并不适用于所有情况。因为没有设置data-myAttr的元素，其data-myAttr等于undefined，$('[data-myAttr!=""]')也会选择那些，这是不正确的。

Answer 3

您可以使用filter()：

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

Answer 4

您可以使用此jQuery Selector扩展程序：Querying element data

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

Answer 5

您可以将JQuery UI与:data() selector

一起使用

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

检查this jsfiddle以获取示例

要获得与.data('myAttr')匹配的所有元素，您可以使用

var matches = $(':data(myAttr)');

这应该适用于具有data-属性的元素和使用$.data()存储数据的元素，因为

从jQuery 1.4.3开始，HTML 5数据属性将自动引入jQuery的数据对象。

但这并不是很好。检查this jsfiddle，您将看到第二次调用选择器时它应匹配2个元素并且只匹配一个元素。这是由于jquery-ui库中的“bug”。

这取自核心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>

Answer 6

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

Answer 7

~~选择我之前使用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/

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

7 个答案: