कक्षा नाम से बाल तत्व कैसे प्राप्त करें?

Question

मैं उस बच्चे की अवधि प्राप्त करने की कोशिश कर रहा हूं जिसमें एक वर्ग है = 4. यहां एक उदाहरण तत्व है:

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

मेरे पास उपलब्ध उपकरण JS और YUI2 हैं। मैं ऐसा कुछ कर सकता हूं:

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

ये IE में काम नहीं करते हैं। मुझे एक त्रुटि मिलती है कि ऑब्जेक्ट (डॉक्टर) इस पद्धति या संपत्ति का समर्थन नहीं करता है (getElementsByClassName)। मैंने getElementsByClassName के क्रॉस ब्राउज़र कार्यान्वयन के कुछ उदाहरणों की कोशिश की है, लेकिन मैं उन्हें काम करने के लिए नहीं मिला और अभी भी वह त्रुटि है।

मुझे लगता है कि मुझे जो चाहिए वह एक क्रॉस ब्राउज़र getElementsByClassName है या मुझे doc.getElementsByTagName ('स्पैन') का उपयोग करने की आवश्यकता है और जब तक मैं कक्षा 4 नहीं पा लेता हूं, मुझे यकीन नहीं है कि मैं यह कैसे कर सकता हूं।

Comments

यहाँ यह है: stackoverflow.com/questions/3808808/…

— mostar

काफी मज़ेदार, अधिक शक्तिशाली querySelectorAllIE 8+ द्वारा समर्थित है जबकि getElementsByClassNameकेवल IE 9+ द्वारा समर्थित है। यदि आप IE 7 को छोड़ सकते हैं, तो आप उपयोग करने के लिए सुरक्षित हैं querySelectorAll('.4')। वैसे, 4एक अमान्य वर्ग नाम है।

— प्रिंज़ोर्न

@paritybit वह प्रश्न काम नहीं करता क्योंकि यह अभी भी getElementsByClassName का उपयोग करता है और IE के पुराने संस्करण का समर्थन नहीं करते हैं। संपादित करें: मुझे खेद है कि यह टैग नाम का उपयोग करता है। यह काम कर सकता है।

— Spyderman4g63

@Prinzhorn मैं किसी कारण के लिए इस उत्पाद में YUI2 चयनकर्ता उपयोगिता उपलब्ध नहीं है।

— Spyderman4g63

@ spyderman4g63 मैंने YUI2 के बारे में कुछ खास बात नहीं की। document.querySelectorAllDOM है और YUI से कोई लेना देना नहीं है

— प्रिंज़ोर्न

Answer 1

doc.childNodesप्रत्येक के माध्यम से पुनरावृत्ति करने के लिए उपयोग करें span, और फिर उसी के classNameबराबर फ़िल्टर करें 4:

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

​

Comments

समस्या यह है कि getElementsByClassName IE8 में काम नहीं करता है।

— Spyderman4g63

यदि तत्व में एक से अधिक वर्ग हैं, तो यह कोड काम नहीं करता है। उदाहरण के लिए: यदि आप "एक" वर्ग वाले तत्वों की तलाश कर रहे हैं, और आपके तत्वों में "एक दो तीन" वर्ग हैं, तो यह फ़ंक्शन उन्हें नहीं ढूंढेगा।

— फ्रैंक वेरोना

@FranVerona जिज्ञासा से बाहर, एक सरल "indexOf ('className')> -1" कई वर्ग के मुद्दे को हल नहीं करेगा?

— जेम्स पोउलोस

@JamesPoulose, यह नहीं होगा । दो वर्गों के लिए निर्धारित एक तत्व होने पर विचार करें: छोटा और बड़ा। thatElement.className एक स्ट्रिंग लौटाएगा जो "छोटे बड़े" के बराबर है। यदि आप एक वर्ग की तलाश कर रहे हैं, जिसे myElement.className.indexOf ("बड़ा") कहा जाता है, तो वास्तव में कक्षा का हिस्सा नहीं होने के बावजूद नकारात्मक 1 के लिए कुछ असमान पैदा करेगा। यदि आपके पास अपने वर्ग के नामों का 100% नियंत्रण है, तो इस तरह का एक फिक्स काम होगा, यह सिर्फ इसकी गारंटी नहीं है, खासकर जब आपका कोड लिखने के लिए जो आपके द्वारा कुल नियंत्रण पर नहीं है कोड को इंटरैक्ट करने जा रहा है।

— डेडबॉय

आपको इस classNameतरह से एक रेगेक्स मैच का उपयोग करना चाहिए : if(doc.childNode[i].className.match("\s*" + search_class + "\s*")जहां चर search_classवर्ग नाम है जिसे आप खोज रहे हैं।

— वेबवंडर

Answer 2

QuerySelector और querySelectorAll का उपयोग करें

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9 और ऊपरी

;)

Comments

अपने स्मार्ट समाधान के लिए धन्यवाद!

— ताई जिनयुआन

यह सिर्फ बच्चों की नहीं, सभी वंशजों की जाँच करता है।

— एसयूएम 1

Answer 3

स्वीकृत उत्तर केवल तत्काल बच्चों की जाँच करता है। अक्सर हम उस वर्ग के नाम के साथ किसी भी वंशज की तलाश कर रहे हैं।

इसके अलावा, कभी-कभी हम किसी भी बच्चे को चाहते हैं जिसमें एक क्लासनेम हो।

उदाहरण के लिए: <div class="img square"></div>className "img" पर एक खोज से मेल खाना चाहिए, भले ही यह सही className हो "img" नहीं।

यहाँ इन दोनों मुद्दों के लिए एक समाधान है:

वर्ग के साथ वंश तत्व का पहला उदाहरण खोजें className

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

Comments

नहीं। मैं सभी वंशजों को नहीं चाहता, बस बच्चे जैसा सवाल पूछा।

— पॉल ड्रेपर

पिल्ला। आपकी टिप्पणी आवश्यक थी। खुशी है कि मैंने 13 अन्य लोगों की मदद की जो (मेरे जैसे) अक्सर अपनी समान-लेकिन-शायद-अधिक-अधिक-जटिल-या-सामान्य समस्या को हल करने के लिए समान उत्तरों की खोज करते हैं।

— ऑग्गी गार्डनर

tnx, मुझे लगता है कि यह उत्तर अधिक उपयोग के मामलों पर सूट करता है

— बोबन स्टोजानोव्स्की

रिकॉर्ड के लिए, मेरे पास दोनों उपयोग के मामले हैं, वंशज थोड़ा अधिक बार हैं, लेकिन मैं यहां बाल उपयोग के मामले के लिए आया हूं।

— एसयूएम 1

Answer 4

Element.querySelector () का उपयोग करें। मान लें: 'myElement' वह मूल तत्व है जो आपके पास पहले से है। 'sonClassName' उस बच्चे की कक्षा है जिसे आप खोज रहे हैं।

let child = myElement.querySelector('.sonClassName');

अधिक जानकारी के लिए, देखें: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector

Comments

किसी कारण से मुझे let child = myElement.querySelector('sonClassName');अपने मामले में उपयोग करना पड़ा

— malat

लेकिन आपको वर्ग नाम क्वेरीसेलेक्टर ('। SonClassName') के बगल में डॉट जोड़ना होगा, अन्यथा यह इसे संभाल लेगा क्योंकि sonClassName एक टैग नाम है वर्ग नाम नहीं

— Hamza Dahmoun

Answer 5

तुम कोशिश कर सकते हो:

notes = doc.querySelectorAll('.4');

या

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

Comments

मैं सोच रहा था कि ब्राउज़र आखिरकार jQuery जैसी किसी चीज की आवश्यकता के बिना यह कार्यक्षमता रखता है, इसे देखकर खुशी हुई। यदि कोई उत्सुक है, तो ऐसा लगता है कि यह अधिकांश आधुनिक ब्राउज़रों में समर्थित है: developer.mozilla.org/en-US/docs/Web/API/Document/…

— Liron Yahdav

Answer 6

मेरे लिए ऐसा लगता है कि आप चौथे स्थान को चाहते हैं। यदि हां, तो आप यह कर सकते हैं:

document.getElementById("test").childNodes[3]

या

document.getElementById("test").getElementsByTagName("span")[3]

यह आखिरी सुनिश्चित करता है कि कोई भी छिपे हुए नोड्स नहीं हैं जो इसे गड़बड़ कर सकते हैं।

Comments

धन्यवाद, लेकिन बाल तत्वों की एक चर राशि है।

— स्पाइडरमैन 4 जी 63

मेरे लिए ऐसा लग रहा था कि सवाल हमेशा चौथे स्पैन बच्चे को प्राप्त करने का था, इस प्रकार मेरे उत्तर की ओर अग्रसर हुआ। मैं निश्चित रूप से इस बात से सहमत हूं कि किसी भी अन्य सूचकांक के भीतर जो भी प्रकार का तत्व प्राप्त करने के लिए एक फ़ंक्शन बेहतर होगा, लेकिन मैंने इस तरह के प्रश्न की कोई व्याख्या नहीं की ... प्रश्न को फिर से पढ़ते हुए मैं देखता हूं कि मैं पूरी तरह से गलत समझा: - )

— क्रिश्चियन जोर्जेंसन

TagNameबस! बहुत आसन।

— जैक्सनक्र

मैं पहले तत्व जैसे डॉक्यूमेंट पाने के लिए अक्सर इस तकनीक का उपयोग करता हूं। document.getElementById ("परीक्षण")।

— चाइल्डअनॉड्स

@LouiseEggleton वहाँ है .firstChildऔर .firstChildElementहालांकि

— याकॉव

Answer 7

लेकिन ध्यान रखें कि पुराने ब्राउज़र समर्थन नहीं करते हैं getElementsByClassName।

फिर, आप कर सकते हैं

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

ऐसा लगता है कि यह काम करता है, लेकिन ध्यान रखें कि एक HTML वर्ग

• एक पत्र के साथ शुरू होना चाहिए: AZ या az
• अक्षरों (ए-ज़-ज़), अंकों (0-9), हाइफ़न ("-") और अंडरस्कोर ("_") के बाद किया जा सकता है

Answer 8

आईडी के नाम का उपयोग करें getElementById, #इसके पहले कोई संकेत नहीं है। फिर आप spanबच्चे को नोड्स का उपयोग करवा सकते हैं getElementsByTagName, और सही कक्षा वाले को खोजने के लिए उनके माध्यम से लूप कर सकते हैं :

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

डेमो: http://jsfiddle.net/Guffa/xB62U/

Comments

क्षमा करें, वह # एक टाइपो था। मैं कंटेनर डिव का चयन कर सकता हूं, लेकिन टैग नाम से बाल तत्वों का चयन नहीं कर सकता, क्योंकि यह फ़ंक्शन ie8 में काम नहीं कर रहा है।

— Spyderman4g63

@ spyderman4g63: getElementsByTagNameविधि IE 8 में काम करती है। यह IE 5.5 के रूप में वापस समर्थित है।developer.mozilla.org/en-US/docs/DOM/…

— गुफ़ा

Answer 9

मेरी राय में, हर बार जब आप कर सकते हैं, तो आपको ऐरे और उसके तरीकों का उपयोग करना चाहिए। वे बहुत, बहुत तेजी से पूरे डोम / आवरण पर लूपिंग कर रहे हैं, या खाली सरणी में सामान धक्का दे रहे हैं। यहाँ प्रस्तुत समाधानों के अधिकांश आप Naive के रूप में यहाँ वर्णित (महान लेख btw) कह सकते हैं:

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

मेरा समाधान : (कोडपेन पर लाइव पूर्वावलोकन: https://codepen.io/Nikolaus91/pen/wEGEYe )

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

Answer 10

जिस तरह से मैं jquery का उपयोग कर रहा हूँ वह कुछ इस तरह है ..

var targetchild = $ ("# परीक्षण")। बच्चे ()। Find ("span.four");

Comments

javascript नहीं jQuery के बारे में सवाल है

— Jya

Answer 11

यहाँ एक अपेक्षाकृत सरल पुनरावर्ती समाधान है। मुझे लगता है कि एक चौड़ाई-पहली खोज यहां उपयुक्त है। यह पाया जाने वाला वर्ग से मेल खाता पहला तत्व लौटाएगा।

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

Answer 12

आप नीचे की लाइन जोड़कर पैरेंट क्लास ला सकते हैं। अगर आपके पास एक आईडी होती, तो यह आसान होता getElementById। फिर भी,

var parentNode = document.getElementsByClassName("progress__container")[0];

तब आप कक्षा के साथ सभी मेल खाने वाले querySelectorAllमाता-पिता <div>का उपयोग कर सकते हैंdiv.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAlldivके वर्ग के साथ हर लाएगाprogress__marker

Answer 13

आधुनिक समाधान

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

प्रलेखन

Answer 14

जून 2018 ईएस 6 को अपडेट करें

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

Answer 15

YUI2 का क्रॉस-ब्राउज़र कार्यान्वयन हैgetElementsByClassName ।

Comments

हम्म। उदाहरण IE8 में काम करता है, लेकिन शायद यह उस स्थिति में काम नहीं करता है जब आप इसे किसी ऑब्जेक्ट पर लागू करते हैं। मेरे मामले में एक yui डोम ऑब्जेक्ट के रूप में doc सेट है और फिर doc.getElementsByClassName का उपयोग करें। कि जब यह विफल हो जाता है। संपादित करें: या शायद मुझे समझ में नहीं आता है कि यह कैसे काम करता है और यह सिर्फ एक सामान्य डोम ऑब्जेक्ट है?

— स्पाइडरमैन 4 जी 63

@ spyderman4g63 का YUI संस्करण getElementsByClassNameएक तरीका है YAHOO.util.Dom। आपके मामले में, कॉल कुछ इस तरह दिखाई देगा YAHOO.util.Dom.getElementsByClassName('four', 'span', 'test')। आपको संभवतः उस दस्तावेज़ की अधिक विस्तृत जानकारी प्राप्त करने के लिए डॉक्स पढ़ना चाहिए, जो कॉल कर रहा है। लघु संस्करण यह अब के लिए दिखेगा कि है spanवर्ग के साथ तत्वों fourके साथ डोम तत्व के नीचे testअपने के रूप में id।

— हांक गे

@ spyderman4g63 हाँ, getकॉल का परिणाम केवल DOM तत्व है। YUI पूरी तरह से 'सब कुछ' को एक फ्रेमवर्क-स्पेसिफिक ऑब्जेक्ट 'एप्रोच' में लपेटता है, जो कि jQuery की तरह कुछ भी नहीं करता है, और न ही यह बोट-पैच देशी ऑब्जेक्ट्स जैसे प्रोटोटाइप करता है (किया था? मैंने w / प्रोटॉयपे को गड़बड़ नहीं किया है) हमेशा के लिए)। इस संबंध में, YUI अधिक Dojo की तरह है।

— हांक गे

Answer 16

यहाँ है कि मैंने इसे YUI चयनकर्ताओं का उपयोग कैसे किया। हांक गे के सुझाव के लिए धन्यवाद।

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

जहाँ चार = वर्गनाम, अवधि = तत्व प्रकार / टैग नाम, और परीक्षण = मूल आईडी।

Answer 17

यहाँYAHOO.util.Dom.getElementsByClassName() से उपयोग करें ।