Jquery เลือกองค์ประกอบทั้งหมดที่มี $ jquery.data ()

เลือกองค์ประกอบที่ฉันได้ตั้งค่าไว้ก่อนหน้านี้ jquery.data();

เช่นเลือกองค์ประกอบทั้งหมดที่มี.data('myAttr')การตั้งค่าไว้แล้ว

วิธีการแก้

jsfiddle เพื่อ demostrate คือ Fiddle

คุณสามารถทำได้

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

สิ่งนี้จะเลือกองค์ประกอบทั้งหมดที่มีแอตทริบิวต์data-myAttrซึ่งไม่เท่ากับ '' (ดังนั้นจึงต้องถูกตั้งค่า);

คุณยังสามารถใช้ตัวกรอง ()

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

วิธีที่ง่ายและดีที่สุดในการเลือกคือ:

$('[data-myAttr]')

ข้อมูลมากกว่านี้:

ฉันทดสอบหลายสิ่งหลายอย่าง

การใช้$('[data-myAttr!=""]')ไม่ได้ผลกับทุกกรณี เนื่องจากองค์ประกอบที่ไม่มีdata-myAttrชุดจะมีdata-myAttrค่าเท่ากับundefinedและ$('[data-myAttr!=""]')จะเลือกองค์ประกอบเหล่านั้นด้วยซึ่งไม่ถูกต้อง

คุณสามารถใช้ตัวกรอง () :

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

คุณสามารถใช้ส่วนขยาย jQuery Selector: การสืบค้นข้อมูลองค์ประกอบ

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

คุณสามารถใช้ 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()จัดเก็บสิ่งนี้จะทำงานได้ดี แต่หากไม่เป็นเช่นนั้นจะไม่รวมอยู่ในผลลัพธ์ที่ตรงกัน

นี่อาจไม่ใช่ข้อผิดพลาดเลยหากสิ่งที่คุณต้องการคือจับคู่เฉพาะองค์ประกอบกับข้อมูลข้อมูลที่คุณตั้งไว้ แต่ถ้าไม่ใช่คุณจะเหลือสองตัวเลือก

1. อย่าใช้ jquery-ui และขยาย pseudo-selector ของคุณเอง $(: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 กับ:datapseudoselector และเข้าร่วมผลลัพธ์ของการเลือก[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>
   
    

   เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์

   ขยายข้อมูลโค้ด

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

เลือกองค์ประกอบที่ฉันได้ตั้งค่าไว้ก่อนหน้านี้ 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/