Jquery chọn tất cả các phần tử có $ jquery.data ()

Chọn các phần tử mà tôi đã đặt trước đó jquery.data();

tức là Chọn tất cả các phần tử .data('myAttr')đã được thiết lập.

GIẢI PHÁP

Một jsfiddle để giảm tốc độ là Fiddle

Bạn có thể làm

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

điều này chọn tất cả các phần tử có thuộc tính data-myAttrkhông bằng '' (vì vậy nó phải được đặt);

bạn cũng có thể sử dụng bộ lọc ()

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

Cách tốt nhất và đơn giản để chọn chúng là:

$('[data-myAttr]')

Thêm thông tin:

Tôi đã thử nghiệm rất nhiều thứ.

Sử dụng $('[data-myAttr!=""]')không hoạt động cho mọi trường hợp. Bởi vì các phần tử không có data-myAttrtập hợp, sẽ có giá trị data-myAttrbằng undefinedvà $('[data-myAttr!=""]')cũng sẽ chọn những phần tử đó, điều này không chính xác.

Bạn có thể sử dụng filter () :

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

Bạn có thể sử dụng phần mở rộng jQuery Selector này: Truy vấn dữ liệu phần tử

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

Bạn có thể sử dụng giao diện người dùng JQuery với bộ chọn : data ()

Chọn các phần tử có dữ liệu được lưu trữ theo khóa được chỉ định.

Kiểm tra jsfiddle này để biết ví dụ

Để có được tất cả các phần tử phù hợp, .data('myAttr')bạn có thể sử dụng

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

Điều này sẽ làm việc cho cả hai yếu tố với data-các thuộc tính và các yếu tố với các dữ liệu được lưu trữ sử dụng $.data()vì

Kể từ jQuery 1.4.3, các thuộc tính dữ liệu HTML 5 sẽ được tự động kéo vào đối tượng dữ liệu của jQuery.

Nhưng điều này không hoạt động rất tốt. Kiểm tra jsfiddle này và bạn sẽ thấy rằng lần thứ hai bộ chọn được gọi, nó sẽ khớp với 2 phần tử và chỉ khớp với một phần tử. Điều này là do "một lỗi" trong thư viện jquery-ui.

Điều này được lấy từ tệp jquery-ui cốt lõi.

 $.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 ] );
        }
});

Như bạn có thể thấy, họ đang sử dụng $.data(elem, match)thay thế $(elem).data(match), điều này khiến bộ nhớ cache không được cập nhật trong trường hợp bạn đang yêu cầu các phần tử có data-thuộc tính. Nếu phần tử đã được kiểm tra khả năng data()lưu trữ, phần tử này hoạt động tốt nhưng nếu không, phần tử này sẽ không được đưa vào các kết quả phù hợp.

Đây có thể không phải là một lỗi nếu những gì bạn muốn là chỉ khớp các phần tử với thông tin dữ liệu do bạn thiết lập nhưng nếu không, bạn chỉ có hai tùy chọn.

1. Không sử dụng jquery-ui và mở rộng bộ chọn giả của riêng bạn $(: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]);
      }
   });

   Hiển thị đoạn mã

    // 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>
   
    

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn mã

2. Sử dụng jquery-ui với trình :datadò giả và nối kết quả của việc chọn [data-myAttr]để bao gồm những kết quả có thể bị bỏ qua

   var matches = $(':data(myAttr)', '[data-myAttr]')

   Hiển thị đoạn mã

    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>
   
    

   Chạy đoạn mãẨn kết quả

   Mở rộng đoạn mã

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

Chọn các phần tử mà tôi đã đặt trước đó jquery.data();

Câu hỏi dành cho việc tìm kiếm tất cả các phần tử bằng một khóa cụ thể chứ không phải bất kỳ dữ liệu nào.

Hãy thử sử dụng 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/