Jquery में उन सभी तत्वों का चयन करें जिनके पास $ jquery.data () है

Question

उन तत्वों का चयन करें जिन्हें मैंने पहले सेट किया है jquery.data();

यानी .data('myAttr')पहले से सेट किए गए सभी तत्वों का चयन करें ।

उपाय

असर दिखाना चाहते एक jsfiddle है फिडल

Answer 1

तुम यह कर सकते थे

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

यह उन सभी तत्वों का चयन करता है जिनके पास एक विशेषता है data-myAttrजो '' के बराबर नहीं है (इसलिए इसे सेट किया जाना चाहिए);

आप फ़िल्टर का उपयोग भी कर सकते हैं ()

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

Comments

या बस:$('[data-myAttr]')

— -lrc

एक ही बात सोची। यह अपेक्षा के अनुरूप काम नहीं करता है। यह देखें डेमो

— gdoron

कोड के पहले टुकड़े में एक क्लोजिंग 'गायब है (सीधे उत्तर को संपादित नहीं कर सकता)

— Florent2

$ ( '[डेटा-myAttr = ""!]'); उन तत्वों को लौटाएगा जिनके पास इसे असाइन नहीं किया गया है। @ पूर्ण टिप्पणी केवल उन तत्वों को प्राप्त होती है जो इसे सेट करते हैं।

— 1

गलत! सही समाधान: $ ('[data-myAttr]') - स्पष्टीकरण के लिए नीचे दिए गए उत्तर को देखें

— BassMHL

Answer 2

उन्हें चुनने का सबसे अच्छा और सरल तरीका है:

$('[data-myAttr]')

अधिक जानकारी:

मैंने बहुत सी चीजों का परीक्षण किया।

का उपयोग करना $('[data-myAttr!=""]')सभी मामलों के लिए काम नहीं करता है। क्योंकि जिन तत्वों का एक data-myAttrसेट नहीं है , उनके पास उनके data-myAttrबराबर होगा undefinedऔर $('[data-myAttr!=""]')उन लोगों का भी चयन करेगा, जो गलत है।

Comments

यह केवल मार्कअप में परिभाषित डेटा विशेषताओं के साथ काम करता है। यह jQuery के माध्यम से परिभाषित डेटा विशेषताओं के साथ काम नहीं करता है, jsfiddle.net/2p7h0Lj8/1

— सोफीवॉर्स

Answer 3

आप फ़िल्टर का उपयोग कर सकते हैं () :

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

Comments

इस पोस्ट के बारे में था, यहाँ यह काम करने के लिए एक बेला है: jsfiddle.net/gbHFZ/1

— रोरी मैकक्रॉसन

विशेषता चयनकर्ता काम क्यों नहीं करता है? $('[data-myAttr]')?

— gdoron

@gdoron, ऐसा इसलिए है क्योंकि data()गेटर फॉर्म वास्तव में एचटीएमएल 5 data-विशेषताओं को पढ़ता है , लेकिन इसका सेटर फॉर्म न तो बनाता है और न ही उन्हें अपडेट करता है।

— Frédéric Hamidi

उम, तो यह कहाँ डेटा बचाता है? क्या आप मेरा संदर्भ दे सकते हैं? मैंने इसे पढ़ा "(सभी डेटा मानों को आंतरिक रूप से jQuery में संग्रहीत किया जाता है)।" पर कहा???

— gdoron

@gdoron, डेटा को एक वैश्विक कैश में जारी रखा गया है, जिसे एक आईडी द्वारा कुंजीबद्ध किया गया है जो विस्तारक संपत्ति के माध्यम से तत्व से जुड़ा हुआ है।

— Frédéric Hamidi

Answer 4

आप इस jQuery के चयनकर्ता निष्कर्षण का उपयोग कर सकते हैं: तत्व डेटा को छोड़ना

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

Comments

jQuery UI में यह पहले से ही है इसलिए कुछ को अनाम फ़ंक्शन को कॉल करने की आवश्यकता नहीं हो सकती है। api.jqueryui.com/data-selector

— arleslie

Answer 5

आप JQuery यूआई का उपयोग : डेटा () चयनकर्ता के साथ कर सकते हैं

उन तत्वों का चयन करता है जिनके पास निर्दिष्ट कुंजी के तहत डेटा संग्रहीत है।

एक उदाहरण के लिए इस jsfiddle की जाँच करें

सभी तत्वों का मिलान करने के लिए .data('myAttr')आप इसका उपयोग कर सकते हैं

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

इस के साथ दोनों तत्वों के लिए काम करना चाहिए data-का उपयोग करके संग्रहीत विशेषताओं और डेटा के साथ तत्वों $.data()क्योंकि

JQuery के 1.4.3 HTML 5 डेटा के रूप में - विशेषताओं को 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 का उपयोग न करें और अपने स्वयं के छद्म चयनकर्ता का विस्तार करें $(: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. :dataPseudoselector के साथ jquery-ui का उपयोग करें और [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>
   
    

Comments

यह डेटा के साथ तत्वों का चयन करने की मेरी समस्या के समाधान का हिस्सा था- * वास्तविक आईडी या डेटा विशेषता नाम को जाने बिना विशेषताएँ। मुझे ऐसा करने के लिए jQuery का विस्तार करने का तरीका मिला, कहीं और, लेकिन व्यावहारिक अनुप्रयोग दिखाने के लिए कोड स्निपेट के लिए यहां +1। दूसरों को केवल संकेत देने के लिए पर्याप्त है, लेकिन कभी-कभी आपको यह जानकारी प्रदान करने की आवश्यकता है कि प्रदान की गई जानकारी का उपयोग कैसे करें। धन्यवाद! :)

— ब्रैंडन इलियट

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/

Comments

उत्तर के लिए धन्यवाद। प्रश्न एक विशिष्ट कुंजी के साथ सभी तत्वों को खोजने के लिए है, न कि किसी डेटा के लिए।

— अरिगोपोलोस स्टावरोस

@ArgiropoulosStavros html data-*विशेषता सेट करने वाले तत्वों को वापस करने की आवश्यकता है , साथ ही साथ jQuery.data()सेट करें?

— अतिथि