Jquery选择所有具有$ jquery.data()的元素

Question

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

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

解

要说明的是 小提琴

Answer 1

你可以做到

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

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

你也可以使用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扩展:查询元素数据

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

Answer 5

您可以将JQuery UI与:data()选择器一起使用

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

请查看此jsfiddle以获取示例

要使所有元素匹配,.data('myAttr')您可以使用

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

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

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

但这并不是很好.检查这个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()存储测试,那么效果很好,但如果没有,它将不会包含在结果匹配中.

如果你想要的只是匹配你设置的数据信息的元素,如果没有,你有两个选项,这可能不是一个错误.

1. 不要使用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>
   
    

2. 将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
});