व्यक्तिगत वर्ग के नामों पर चयनकर्ता के साथ 'शुरू होता है' का उपयोग करना

Question

यदि मेरे पास निम्नलिखित हैं:

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

मैं पहले दो DIV को खोजने के लिए निम्नलिखित चयनकर्ता का उपयोग कर सकता हूं:

$("div[class^='apple-']")

हालांकि, अगर मेरे पास यह है:

<div class="some-other-class apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

यह केवल दूसरा DIV मिलेगा, क्योंकि पहली div की कक्षा एक स्ट्रिंग के रूप में वापस आ गई है (मुझे लगता है) और वास्तव में 'apple-' से शुरू नहीं होती है, बल्कि 'कुछ-'

इसका उपयोग करने के लिए नहीं है, लेकिन इसके बजाय एक तरीका है:

$("div[class*='apple-']")

इसके साथ समस्या यह है कि मेरे उदाहरण में 3rd DIV का भी चयन किया जाएगा।

प्रश्न: वाया jQuery, एक स्ट्रिंग के रूप में संपूर्ण वर्ग विशेषता के बजाय व्यक्तिगत वर्ग के नामों पर विधेय चयनकर्ताओं का उपयोग करने का उचित तरीका क्या है? क्या यह केवल CLASS को हथियाने की बात है, फिर इसे एक ऐरे में विभाजित करना और फिर प्रत्येक व्यक्ति के साथ रेगेक्स के माध्यम से लूप करना? या वहाँ एक और अधिक सुंदर / कम क्रिया समाधान है?

Answer 1

"सेब-" के साथ शुरू होने वाली कक्षाएं "सेब-"

$("div[class^='apple-'],div[class*=' apple-']")

Comments

+1। हालाँकि मैं @parrots के इस सुझाव से सहमत हूँ कि "सेब" की अपनी कक्षा यहाँ होनी चाहिए, क्योंकि यह स्पष्ट रूप से एक से अधिक डिवीजनों को ओवरलैप करता है फिर भी एक अलग इकाई है। लेकिन इससे समस्या हल हो जाती है।

— 17

हम्म ... चालाक! मैंने वहां अंतरिक्ष का उपयोग करने के बारे में नहीं सोचा था। क्या एक जूलरी चयनकर्ता में बूलियन ऑपरेटरों का उपयोग किया जा सकता है? आदर्श रूप से, उपरोक्त 'दुर्लभ' (दुर्लभ और संभावित परिहार्य) मामले से बचने के लिए 'ओआर' होगा, जहां 'सेब-'

— डीए के

मुझे यकीन नहीं है कि मुझे समझ में आया है, लेकिन अगर आप केवल दूसरे चयनकर्ता का उपयोग करना चाहते हैं, जब पहला चयनकर्ता शून्य तत्व देता है, तो आप कुछ ऐसा कर सकते हैं: var divs = $("div[class^='apple-']"); if(divs.length == 0) divs = $("div[class*=' apple-']");

— जोश स्टोडोला

अब जब मैं इसके बारे में सोचता हूं, तो आपका प्रारंभिक समाधान ठीक काम करता है। एक DIV जिसमें "Apple-ईंट ऐप्पल-हॉर्स" जैसी क्लास थी, उसे अभी भी एक बार jQuery ऑब्जेक्ट में चुना जाएगा।

— डीए।

यदि आप विशिष्ट तत्व के लिए क्लास

— बाउंड

Answer 2

मैं "सेब" को अपनी कक्षा बनाने की सलाह दूंगा। आपको स्टार्ट-विथ / एंड्स से बचना चाहिए-अगर आप कर सकते हैं क्योंकि चयन करने में सक्षम होने के कारण div.appleयह बहुत तेज़ होगा। यह अधिक सुरुचिपूर्ण समाधान है। चीजों को अलग-अलग वर्गों में विभाजित करने से डरो मत अगर यह कार्य को सरल / तेज करता है।

Comments

आप यह कैसे आंकेंगे कि यह तेजी से होगा? इसे अभी भी संपूर्ण DOM को स्कैन करना है और वर्ग विशेषता का मूल्यांकन करना है। यह मामूली रूप से तेज़ (सबसे अच्छा) होगा क्योंकि इसमें क्लास विशेषता को प्रतिस्थापित नहीं करना होगा। नगण्य।

— जोश स्टोडोला

कंपोनेंटहाउस.com / article-19 : यदि आप क्लास सेक्शन में आते हैं, तो नियमित डॉट सिंटैक्स का उपयोग करना आमतौर पर क्लास को एक विशेषता के रूप में व्यवहार करने की तुलना में अधिक तेज़ होता है। सबरिंग खोज को जोड़ें (और अतिरिक्त काम उसे कई वर्ग नामों के साथ तत्वों को बाहर करने के लिए करना होगा) और यह एक सभ्य प्रदर्शन बचत में जोड़ देगा।

— तोते

मैं सहमत हूँ। पकड़ यह है कि हम अभी भी IE6 का भारी समर्थन कर रहे हैं और यह CSS में यौगिक चयनकर्ताओं का समर्थन नहीं करता है: .class1.class2.class3 जैसे, हम लंबे समय तक वर्ग के नाम का उपयोग करने पर भरोसा कर रहे हैं जहां 'पैरामीटर' डैश द्वारा विभाजित हैं।

— डीए।

Answer 3

यह उपसर्ग के लिए है

$("div[class^='apple-']")

इस के साथ शुरू होता है ताकि आप वहाँ में '-' चार की जरूरत नहीं है

$("div[class|='apple']")

आप jQuery चयनकर्ता की अन्य शांत विविधताओं का एक गुच्छा यहाँ देख सकते हैं https://api.jquery.com/category/selectors/

Answer 4

हालांकि यहां शीर्ष उत्तर पूछने वाले के विशेष मामले के लिए एक समाधान है, यदि आप एक समाधान की तलाश कर रहे हैं तो वास्तव में व्यक्तिगत नामों पर 'शुरू होता है' का उपयोग कर रहा है:

आप इस कस्टम jQuery के चयनकर्ता का उपयोग कर सकते हैं, जिसे मैं :acp()"ए क्लास प्रीफिक्स" कहता हूं । इस पोस्ट में सबसे नीचे कोड होता है।

var test = $('div:acp("starting_text")');

यह किसी भी और सभी <div>तत्वों का चयन करेगा, जिसमें दिए गए स्ट्रिंग के साथ कम से कम एक वर्ग का नाम है (इस उदाहरण में "start_text"), इस बात की परवाह किए बिना कि क्या वर्ग विशेषता स्ट्रिंग में शुरुआत या कहीं और है।

<div id="1" class="apple orange lemon" />
<div id="2" class="orange applelemon banana" />
<div id="3" class="orange lemon apple" />
<div id="4" class="lemon orangeapple" />
<div id="5" class="lemon orange" />

var startsWithapp = $('div:acp("app")');

इस तत्वों 1, 2, और 3, लेकिन वापस आ जाएगी नहीं 4 या 5।

यहाँ :acpकस्टम चयनकर्ता के लिए घोषणा है , जिसे आप कहीं भी रख सकते हैं:

$(function(){
    $.expr[":"].acp = function(elem, index, m){
          var regString = '\\b' + m[3];
          var reg = new RegExp(regString, "g");
          return elem.className.match(reg);
    }
});

मैंने ऐसा इसलिए किया क्योंकि मैं बहुत से वेबसाइट्स की GreaseMonkey हैकिंग करता हूं जिन पर मेरा कोई बैकएंड कंट्रोल नहीं है, इसलिए मुझे अक्सर क्लास के नाम वाले तत्वों को खोजने की जरूरत होती है जिनमें डायनेमिक प्रत्यय होते हैं। यह बहुत उपयोगी रहा है।

Answer 5

इसे इस्तेमाल करे:

$("div[class]").filter(function() {
    var classNames = this.className.split(/\s+/);
    for (var i=0; i<classNames.length; ++i) {
        if (classNames[i].substr(0, 6) === "apple-") {
            return true;
        }
    }
    return false;
})

Answer 6

<div class="apple-monkey"></div>
<div class="apple-horse"></div>
<div class="cow-apple-brick"></div>

इस मामले में प्रश्न के रूप में जोश स्टोडोला का उत्तर सही वर्ग है जो "सेब-" के साथ शुरू होता है और साथ ही साथ "सेब-" वर्ग भी शामिल है।

$("div[class^='apple-'],div[class*=' apple-']")

लेकिन अगर तत्व में इस तरह के कई वर्ग हैं

<div class="some-class apple-monkey"></div>
<div class="some-class apple-horse"></div>
<div class="some-class cow-apple-brick"></div>

तब जोश स्टोडोला का समाधान इसके लिए काम नहीं करेगा
, इस तरह से कुछ करना होगा

$('.some-parent-class div').filter(function () {
  return this.className.match(/\bapple-/);// this is for start with
  //return this.className.match(/apple-/g);// this is for contain selector
}).css("color","red");

हो सकता है कि यह किसी और को धन्यवाद करने में मदद करे

Answer 7

यदि किसी तत्व में कई गुण हैं "[वर्ग ^ = 'सेब-']" तो काम नहीं है, जैसे

<div class="fruits apple-monkey"></div>

Comments

ओपी प्रश्न में इसका उल्लेख करते हैं।

— हंस