HTML5 का उपयोग करके कस्टम डेटा विशेषताओं पर jQuery के चयनकर्ता

Question

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

उदाहरण के रूप में HTML के इस टुकड़े को लेना:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

क्या चयनकर्ता हैं:

• data-company="Microsoft"नीचे के साथ सभी तत्व"Companies"
• data-company!="Microsoft"नीचे के साथ सभी तत्व"Companies"
• अन्य मामलों में "अन्य शामिल हैं, की तुलना में कम, अधिक से अधिक, आदि ..." का चयन करना संभव है।

Comments

अगर आप यहां देखेंगे तो आपको api.jquery.com/category/selectors :-)

— एलन किमर जेन्सेन

डुप्लिकेट: stackoverflow.com/q/2487747/1066234

— काई नैक सेप

Answer 1

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

करने के लिए देखो jQuery चयनकर्ता : शामिल एक चयनकर्ता है

यहाँ पर जानकारी है : चयनकर्ता शामिल हैं

Comments

यह काम करेगा? $('div[data-col="1"][data-row="2"]') क्या यह उस div का चयन करेगा जहाँ डेटा-कॉल 1 और डेटा-पंक्ति 2 के बराबर होती है, या यह उन दोनों में से किसी एक का चयन करेगा?

— लुडजैकब्स

यदि डेटा .data ('कुछ', मान) के माध्यम से सेट किया जाता है तो क्या यह काम करेगा? अक्सर यह मूल्य संलग्न करते समय एक वास्तविक विशेषता नहीं बनाता है। मुझे पता है कि ओपी विशेषताओं के बारे में बहुत विशिष्ट था, लेकिन मैंने सोचा कि अगर इस चयनकर्ता के साथ अन्य लोगों के पास कोई समस्या है तो मैं इसके बारे में जागरूकता बढ़ाऊंगा।

— एरोनल्स

@AaronLS नहीं यह कम से कम (jQuery के पुराने संस्करणों जैसे। 1.4.4 के साथ नहीं है) - आपको .attr('data-something', 'value')HTML में अपडेट देखने के लिए डेटा का उपयोग करने की आवश्यकता है । के अनुसार stackoverflow.com/questions/6827810/...

— मैटी जम्मू

क्या dataकॉल में टाइप किए बिना डेटा विशेषता मान प्राप्त करने का कोई तरीका नहीं है ?

— ९ .२६ पर

@gwho$('#element').data('something')

— गौई

Answer 2

jQuery UIएक :data()चयनकर्ता है जिसका उपयोग भी किया जा सकता है। यह संस्करण 1.7.0 के बाद से ऐसा लगता है।

आप इसे इस तरह से उपयोग कर सकते हैं:

एक data-companyविशेषता के साथ सभी तत्वों को प्राप्त करें

var companyElements = $("ul:data(group) li:data(company)");

सभी तत्वों को data-companyसमान रूप से प्राप्त करेंMicrosoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

उन सभी तत्वों को प्राप्त करें जहां data-companyसमान नहीं हैMicrosoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

आदि...

नए :data()चयनकर्ता का एक चेतावनी यह है कि आपको चयनित होने के लिए कोड द्वाराdata मान सेट करना होगा । इसका मतलब यह है कि ऊपर काम करने के लिए , HTML में परिभाषित करना पर्याप्त नहीं है। आपको पहले यह करना होगा:data

$("li").first().data("company", "Microsoft");

यह एकल पृष्ठ अनुप्रयोगों के लिए ठीक है जहाँ आप $(...).data("datakey", "value")इस या इसी तरह से उपयोग करने की संभावना रखते हैं।

Comments

मुझे आपका कैविएट नहीं मिला। यह मेरे लिए ठीक काम करता है, और मैं js में डेटा के लिए कोई अन्य संदर्भ नहीं देता हूं। $ ( '# आईडी') पाठ ($ ( '# mydatasource') को डेटा ( 'खाली')।)। इससे #id तत्व #mydatasource तत्व पर डेटा-खाली टैग की सामग्री के साथ पॉप्युलेट होगा।

— 9

@FacebookAnswers क्या आपने :data()चयनकर्ता, या .data()विधि का उपयोग किया?

— रघ्घ्स २६'१४

मुझे पता है तुम्हारा क्या मतलब है। मैं विधि का उपयोग कर रहा था, जबकि आपके चेतावनी ने विधि को संदर्भित किया।

— साइप्रस में आराम

^ आप का मतलब है उसका चयनकर्ता को संदर्भित।

— अहानिबेकद

अजीब, अब यह जेकरी 3.3.1 के साथ फिडल में काम करने लगता है: jsfiddle.net/kai_noack/q6nzLs20/1

— काई नैक सेप

Answer 3

jsFiddle Demo

jQuery आप काम की तलाश में हैं प्रश्नों को बनाने के लिए कई चयनकर्ताओं (पूर्ण सूची) प्रदान करता है। अपने प्रश्न को संबोधित करने के लिए "अन्य मामलों में" सहित अन्य चयनकर्ताओं का उपयोग करना संभव है, "से कम, से अधिक, आदि ..."। आप इन HTML5 डेटा विशेषताओं को देखने के लिए, के साथ शुरू होता है और के साथ समाप्त होता है का उपयोग भी कर सकते हैं। अपने सभी विकल्पों को देखने के लिए उपरोक्त पूरी सूची देखें।

बुनियादी क्वेरी को ऊपर कवर किया गया है, और जॉन हार्टसॉक के उत्तर का उपयोग करने से प्रत्येक डेटा-कंपनी तत्व प्राप्त करने या Microsoft (या किसी भी अन्य संस्करण :not) को छोड़कर हर एक को प्राप्त करने के लिए सबसे अच्छा दांव चल सकता है ।

इसे अन्य बिंदुओं तक विस्तारित करने के लिए, जिन्हें आप खोज रहे हैं, हम कई मेटा चयनकर्ताओं का उपयोग कर सकते हैं। सबसे पहले, यदि आप कई प्रश्न करने जा रहे हैं, तो मूल चयन को कैश करना अच्छा है।

var group = $('ul[data-group="Companies"]');

अगला, हम इस सेट में उन कंपनियों की तलाश कर सकते हैं जो जी के साथ शुरू होती हैं

var google = $('[data-company^="G"]',group);//google

या शायद कंपनियां जिनमें सॉफ्ट शब्द होता है

var microsoft = $('[data-company*="soft"]',group);//microsoft

उन तत्वों को प्राप्त करना भी संभव है जिनके डेटा विशेषता के समाप्त होने के मिलान होते हैं

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

Answer 4

शुद्ध / वेनिला जेएस समाधान ( यहां काम करने का उदाहरण )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

में querySelectorAll आप वैध का उपयोग करना चाहिए CSS चयनकर्ता (वर्तमान स्तर 3 )

स्पीड टेस्ट (2018.06.29) jQuery और शुद्ध जेएस के लिए: क्रोम 67.0.3396.99 (64-बिट), सफारी 11.0.3 (13604.5.6), फ़ायरफ़ॉक्स 10.0.2 (64) पर मैको हाई सिएरा 10.13.3 पर परीक्षण किया गया था। -बिट)। नीचे स्क्रीनशॉट सबसे तेज़ ब्राउज़र (सफारी) के लिए परिणाम दिखाता है:

PureJS क्रोम पर 12%, फ़ायरफ़ॉक्स पर 21% और सफारी पर 25% की तुलना में jQuery से तेज था। क्रोम के लिए दिलचस्प गति 18.9M संचालन प्रति सेकंड, फ़ायरफ़ॉक्स 26M, सफारी 160.9M (!) है।

तो विजेता PureJS है और सबसे तेज ब्राउज़र सफारी है (क्रोम की तुलना में 8 गुना अधिक तेज!)

यहां आप अपनी मशीन पर परीक्षण कर सकते हैं: https://jsperf.com/js-selectors-x