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

Question

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

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

Comments

यह भी देखें stackoverflow.com/q/4191386/292060

— goodeye

यही कारण है कि मुझे सभी डेटा विशेषताओं का चयन करने में मदद मिली (मूल्य की परवाह किए बिना): $('*[data-customerID]')आप इसे उदाहरण के लिए उपयोग कर सकते हैं$('*[data-customerID]').each( function() { ... });

— काई नैक

Answer 1

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

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

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

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

Comments

बस एक नोट जो .data ('foo') jQuery 1.4.3 के बाद से 'डेटा-फू' विशेषता का मान प्राप्त करने के लिए काम करता है। इसके अलावा, jQuery 1.6 के बाद से: .data ('fooBar') को विशेषता 'डेटा-फू-बार' मिलती है।

— जेम्स मैककॉर्मैक

@Zootius: हाँ, प्लगइन readme में इसके बारे में एक नोट है: "jQuery के 1.4.3 के रूप में, डिफ़ॉल्ट रूप .data()से कस्टम data-*विशेषताओं के नक्शे , इस प्लगइन को निरर्थक प्रदान करते हैं। यह अभी भी jQuery के पुराने संस्करणों के लिए इस्तेमाल किया जा सकता है। ”

— मथियास बिएनेंस

तो एक पोस्ट jQuery 1.4.3 कैसे करता है, अपने डेटा ऑब्जेक्ट के मूल्य से एक वस्तु का चयन करें? आइए हम इस उदाहरण में चयन करना चाहते हैं, 22 के बराबर customerID के लिए डेटा के साथ कोई भी वस्तु?

— ट्रिप

इसके अलावा अगर आप केवल विशिष्ट डेटा विशेषता की उपस्थिति में रुचि रखते हैं, तो आप ऐसा कर सकते हैं:$('[data-customerID]')

— डार्कसाइड

यह काम नहीं करता है, अगर डेटा फ़ील्ड jquery (उपयोग करके .data()) द्वारा सेट किया गया था , है ना?

— मार्टिन आर।

Answer 2

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

$("[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>

Comments

अच्छा। ध्यान दें कि ~=व्हाट्सएप से अलग किए गए शब्दों से *=मेल खाता है जबकि किसी भी विकल्प से मेल खाता है।

— सैम

^चरित्र के बारे में क्या ?

— kuba44

@ kuba44 वास्तव में आप ^ का भी उपयोग कर सकते हैं, जैसे $('[data-test^=foo]')कि इस मामले में आप फू से शुरू होने वाली किसी भी चीज का चयन करते हैं, जैसे कि <div data-test="foo_exact_value">या <div data-test="food">नहीं<div data-test="seafoo">

— JDuarteDJ 15

विशेषता चयनकर्ताओं की व्यापक सूची: draft.csswg.org/selectors-3/#attribute-selectors

— user1460043

Answer 3

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

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

Comments

aha - किसी और को बताते हैं कि यह stackoverflow.com/questions/4191386/…

— निकलता है

और .filter यहां

— drzaus

यह कुछ जादू ब्राउज़र thingy का उपयोग करता है और html प्रभावित नहीं करता है ), वहाँ जादू जैसी कोई चीज नहीं है: learningjquery.com/2011/09/using-jquerys-data-apis

— टॉम Sarduy

@TomSarduy: "कोई भी पर्याप्त रूप से उन्नत तकनीक जादू से अप्रभेद्य है।"

— drzaus

यदि आप एक डेटा विशेषता जोड़ रहे हैं जिसे आपको बाद में खोजने की आवश्यकता है, तो उपयोग करें$item.attr('data-id', 10);

— पेड्रो मोरिरा

Answer 4

मैंने jQuery के बिना जावास्क्रिप्ट उत्तर नहीं देखा है। उम्मीद है कि यह किसी की मदद करता है।

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

जानकारी:

• डेटा विशेषताएँ

• .querySelectorAll ();

Comments

इसके लिए धन्यवाद। गैर-जेकरी समाधानों को देखकर अच्छा लगा।

— चक

Answer 5

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

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

Answer 6

मूल निवासी जेएस उदाहरण

तत्वों के NodeList प्राप्त करें

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

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

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

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

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

नोड्स के संग्रह को लक्षित करें जो एक नोडेलिस्ट को लौटाता है

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

एचटीएमएल:

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

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

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

एचटीएमएल:

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

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

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

एचटीएमएल:

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

उन वस्तुओं को प्राप्त करें जहां मूल्य के साथ शुरू होता है

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

Comments

"पहले तत्व प्राप्त करें" के लिए चयनकर्ता सही है लेकिन अन्य उदाहरणों के अनुरूप नहीं है - मेरा मानना ​​है कि यह "डेटा-" गायब है।

— ग्यूपैडपॉक

Answer 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'});  
     });

Comments

क्या आपने फील की कोशिश की? एक ही चीज़ को प्राप्त करने के लिए FIlter विधि एक और तरीका है। यह तब उपयोगी हो सकता है जब आपके पास पहले से ही Jquery वस्तुओं का एक सेट हो और आपको डेटा विशेषता या किसी अन्य चीज़ के आधार पर फ़िल्टर करने की आवश्यकता हो।

— रज़ान पॉल

मेरी क्षमायाचना, @Blizzard। मैंने गलत उत्तर पर टिप्पणी की है। इसे अब सही में दे दिया। #AlwaysALongDayAtWork

— पीटर बिशप

Answer 8

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

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

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

Comments

इससे मुझे बहुत मदद मिली - अगर मैंने डेटा या प्रोप विधियों का उपयोग किया है, तो $ ('... [डेटा-एक्स = "वाई"]') द्वारा चयन काम नहीं कर रहा था - मैंने इसके बजाय attr का उपयोग किया (यह विशेषता परिवर्तन को धक्का देता है) डोम)। Thx

— जरदा

Answer 9

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

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

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

Comments

यह गलत प्रतीत होता है। कम से कम अब यह सही नहीं है। मैंने केवल $ ('[डेटा-एक्शन = "सेटस्टैटस"]) का उपयोग किया है।)। RemoveClass (' अक्षम '); क्रोम में और यह पूरी तरह से काम करता है।

— पीटर बिशप

मुझे लगता है कि चयनकर्ता के अंदर "" का कोई उपयोग नहीं है, इसका उपयोग इस प्रकार किया जा सकता है$('[data-action=setStatus]').removeClass('disabled')

— अनिमेष सिंह

Answer 10

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

$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();

Comments

पहला समाधान रिटर्न स्टेटमेंट को याद करता है, इसे करने की आवश्यकता है: $ el.filter (फ़ंक्शन (i, x) {रिटर्न $ (x) .data ('foo-bar');})। DoSomething ();

— सलमा गोमा

Answer 11

बस 'जीवन स्तर' की कुछ विशेषताओं के साथ सभी उत्तरों को पूरा करने के लिए - अब तक (html5-युग में) यह बिना किसी 3 पार्टी के काम के संभव है:

• शुद्ध / सादा जेएस क्वेरीसेलेक्टर (सीएसएस-चयनकर्ताओं का उपयोग करता है):
  • DOM में पहला चुनें: document.querySelector('[data-answer="42"],[type="submit"]')
  • DOM में सभी का चयन करें: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• शुद्ध / सादा सीएसएस
  • कुछ विशिष्ट टैग: [data-answer="42"],[type="submit"]
  • एक विशिष्ट विशेषता के साथ सभी टैग: [data-answer]याinput[type]