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




html5 custom-data-attribute (8)

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

$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 का मूल्य है।

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


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

$("[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-XXX=111]') सफारी 8.0 में काम नहीं कर रहा है।

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

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


इसके लिए क्रोम में काम करने के लिए मूल्य में उद्धरणों की एक और जोड़ी नहीं होनी चाहिए।

यह केवल काम करता है, उदाहरण के लिए, इस तरह:

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

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

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

मूल जेएस उदाहरण

तत्वों के नोड सूची प्राप्त करें

var elem = document.querySelectorAll('[data-id="container"]')

एचटीएमएल: <div data-id="container"></div>

पहला तत्व प्राप्त करें

var firstElem = document.querySelectorAll('[id="container"]')[0]

एचटीएमएल: <div id="container"></div>

नोड्स का लक्ष्य संग्रह फिर चुनें

document.getElementById('footer').querySelectorAll('[data-id="12"]')

एचटीएमएल:

<div class="footer">
    <div data-id="12"></div>
</div>

एकाधिक (OR) डेटा मानों के आधार पर तत्व प्राप्त करें

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

एचटीएमएल:

<div data-selection="20"></div>
<div data-section="12"></div>

संयुक्त (AND) डेटा मानों के आधार पर तत्व प्राप्त करें

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

एचटीएमएल:

<div data-prop1="12" data-prop2="20"></div>

आइटम प्राप्त करें जहां मूल्य शुरू होता है

document.querySelectorAll('[href^="https://"]')

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-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"]');




custom-data-attribute