jquery - डेटा विशेषता द्वारा तत्व का चयन करना




html5 custom-data-attribute (7)

Jquery फ़िल्टर () विधि के माध्यम से:

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

जावास्क्रिप्ट:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });

क्या उनके data एट्रिब्यूट के आधार पर तत्वों का चयन करने के लिए कोई आसान और सीधी-आगे विधि है? उदाहरण के लिए, उन सभी एंकरों का चयन करें जिनमें customerID आईडी नामक डेटा विशेषता है जिसका 22 का मूल्य है।

मैं इस तरह की जानकारी को स्टोर करने के लिए rel या अन्य विशेषताओं का उपयोग करने में संकोच करता हूं, लेकिन मुझे उस डेटा के आधार पर तत्व चुनने में बहुत मुश्किल लगता है।


इस तरह का निर्माण: $('[data-XXX=111]') सफारी 8.0 में काम नहीं कर रहा है।

यदि आप इस तरह से डेटा विशेषता सेट करते हैं: $('div').data('XXX', 111) , यह केवल तभी काम करता है जब आप डेटा विशेषता को सीधे इस तरह डीओएम में सेट करते हैं: $('div').attr('data-XXX', 111)

मुझे लगता है कि ऐसा इसलिए है क्योंकि jQuery टीम ने प्रत्येक परिवर्तन डेटा विशेषता पर डीओएम पुनर्निर्माण पर स्मृति रिसाव और भारी संचालन को रोकने के लिए कचरा कलेक्टर अनुकूलित किया है।


कभी-कभी तत्वों को फिल्टर करने के लिए वांछनीय है कि उनके पास प्रोग्रामेटिक रूप से जुड़े डेटा-आइटम हैं (उर्फ डोम-एट्रिब्यूट्स के माध्यम से नहीं):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

उपरोक्त काम करता है लेकिन बहुत पठनीय नहीं है। एक बेहतर तरीका इस प्रकार की चीज का परीक्षण करने के लिए छद्म चयनकर्ता का उपयोग करना है:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

अब हम मूल कथन को कुछ अधिक धाराप्रवाह और पठनीय करने के लिए पुन: सक्रिय कर सकते हैं:

$el.filter(":hasData('foo-bar')").doSomething();

डेटा विशेषता data-customerID==22 साथ सभी एंकरों का चयन करने के लिए, आपको केवल उस तत्व प्रकार के लिए खोज के दायरे को सीमित करने के लिए a शामिल करना चाहिए। पृष्ठ पर कई तत्व होने पर प्रदर्शन समस्याओं का कारण बनने पर डेटा विशेषता खोज को बड़े लूप में या उच्च आवृत्ति पर करना पड़ सकता है।

$('a[data-customerID="22"]');

लोगों के लिए गुगलिंग और डेटा-विशेषताओं के साथ चयन करने के बारे में अधिक सामान्य नियम चाहते हैं:

$("[data-test]") किसी भी तत्व का चयन करेगा जिसमें केवल डेटा विशेषता है (विशेषता का मूल्य कोई फर्क नहीं पड़ता)। समेत:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]') किसी भी तत्व का चयन करेगा जहां डेटा विशेषता में foo शामिल है लेकिन सटीक नहीं होना चाहिए, जैसे कि:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]') किसी भी तत्व का चयन करेगा जहां डेटा विशेषता सटीक मान the_exact_value , उदाहरण के लिए:

<div data-test="the_exact_value">Exact Matches</div>

लेकिन नहीं

<div data-test="the_exact_value foo">This won't match</div>

$('[data-whatever="myvalue"]') एचटीएमएल विशेषताओं के साथ कुछ भी चुनेगा, लेकिन नए jqueries में ऐसा लगता है कि यदि आप $(...).data(...) उपयोग करते हैं $(...).data(...) डेटा संलग्न करने के लिए, यह कुछ जादू ब्राउज़र चीज़ों का उपयोग करता है और एचटीएमएल को प्रभावित नहीं करता है, इसलिए पिछले जवाब में संकेत के अनुसार खोज नहीं किया गया है।

सत्यापित करें (1.7.2+ के साथ परीक्षण किया गया) (भी देखें पहेली): (अधिक पूर्ण होने के लिए अपडेट किया गया)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');

$('*[data-customerID="22"]');

आपको * को छोड़ने में सक्षम होना चाहिए, लेकिन यदि मैं सही तरीके से याद करता हूं, तो आप जिस jQuery संस्करण का उपयोग कर रहे हैं उसके आधार पर, यह दोषपूर्ण परिणाम दे सकता है।

ध्यान दें कि चयनकर्ता API ( document.querySelector{,all} ) के साथ संगतता के लिए, विशेषता मान ( 22 ) के आसपास उद्धरण इस मामले में छोड़े नहीं जा सकते हैं

साथ ही, यदि आप अपनी jQuery स्क्रिप्ट में डेटा विशेषताओं के साथ काम करते हैं, तो आप HTML5 कस्टम डेटा विशेषताओं प्लगइन का उपयोग करने पर विचार करना चाहेंगे। यह आपको .dataAttr('foo') का उपयोग कर और भी अधिक पठनीय कोड लिखने की अनुमति देता है, और परिणामस्वरूप .attr('data-foo') का उपयोग करने की तुलना में minification के बाद एक छोटे फ़ाइल आकार में परिणाम देता है।





custom-data-attribute