शुद्ध जावास्क्रिप्ट

में एक तत्व का nth-child संख्या प्राप्त करें मैं अपनी साइट के लिए एक फ़ंक्शन बना रहा हूं जहां मैंने डेटा विशेषता सेट की है जिसमें उस तत्व का nth-child संख्या शामिल है।शुद्ध जावास्क्रिप्ट

मेरे HTML मार्कअप:

<html> 
<body> 
    <section class="hardware">some text, nth-child is one</section> 
    <section class="hardware">some text, nth-child is two</section> 
    <section class="hardware">some text, nth-child is three</section> 
    <section class="hardware">some text, nth-child is four</section> 
    <section class="hardware">some text, nth-child is five</section> 
</body> 
</html>

मेरा JavaScript अब तक:

var selector = document.getElementsByClassName('hardware'); 
for(var i = 0; i <= selector.length; i++) { 
    var index = selector[i] //get the nth-child number here 
    selector[i].dataset.number = index; 
}

मैं शुद्ध जावास्क्रिप्ट (नहीं jQuery) के साथ एक तत्व के n वें वाले बच्चे नंबर कैसे प्राप्त कर सकते हैं, यह और भी है जावास्क्रिप्ट में संभव है?

स्रोत

2014-06-26 Sake Salverda

जो शुद्ध जावास्क्रिप्ट नहीं है? – bitoiu

@bitoiu हां यह है, लेकिन मैं nth-child संख्या कैसे प्राप्त कर सकता हूं? –

यदि यह jQuery के साथ संभव है, तो यह भी संभव है। याद रखें, jQuery सिर्फ जेएस कार्यों का एक सेट है। यह चीजों को आसान बनाता है, यह अतिरिक्त कार्यक्षमता नहीं जोड़ता है। – Darkwater

जब आप "संख्या" कहते हैं, तो क्या आपका मतलब 1, 2, आदि या "एक", "दो" आदि है?

हैं 1, 2, आदि, तो नंबर बस है i + 1 ...

"एक", "दो", आदि, तो आप तत्व के अंदर पाठ, शायद पाने के लिए तो जरूरत है इसका विश्लेषण करने के लिए Regexp का उपयोग करें और इच्छित मूल्य प्राप्त करें।

स्रोत

2014-06-26 17:11:52 jcaron

नंबर के साथ मेरा मतलब 1,2,3,4,5, आदि ... –

फिर 'i + 1' वह है जो आप चाहते हैं। – jcaron

@ सेक साल्वरडा: यह केवल "ठीक काम करता है" जब आपके 'getElementsByClassName()' द्वारा लौटाए गए तत्वों का पूरा सेट उसी माता-पिता के अंतर्गत होता है और कोई अन्य बच्चा तत्व नहीं होता जो ': nth-child() ' । लेकिन अगर आप हमेशा उस धारणा पर भरोसा कर सकते हैं, तो 'i + 1' वास्तव में पर्याप्त होगा। – BoltClock

इस पिछले उत्तर को देखें HERE।

यह का उपयोग करता है

var i = 0; 
while((child = child.previousSibling) != null) 
    i++; 
//at the end i will contain the index.

स्रोत

2014-06-26 17:14:32 joshboley

आप प्रत्येक विभाजन सरणी से पिछले शब्द पाने में रिक्त स्थान पर पाठ विभाजित कर सकते हैं:

var hards = document.getElementsByClassName('hardware'); 
for (var i=0; i < hards.length; i++) { 
    var hardText = hards[i].innerText || hard[i].textContent; 
    var hardList = hardText.split(' '); 
    var hardLast = hardList[hardList.length - 1]; 
    alert(hardLast); 
}

मैं उपयोग कर रहा हूँ || यहां क्योंकि फ़ायरफ़ॉक्स innerText का समर्थन नहीं करता है, जबकि IE textContent का समर्थन नहीं करता है।

यदि तत्वों में केवल टेक्स्ट होता है तो innerHTMLinnerText/textContent के बजाय उपयोग किया जा सकता है।

स्रोत

2014-06-26 17:15:41

सीधे शब्दों में incrementing सूचकांक रैखिक के रूप में ही वास्तव में दिए गए मार्कअप में दिखाया गया है काम करता है, तो सभी कि वर्ग के नाम से मेल खाते तत्वों, एक ही माता-पिता का एकमात्र ऐसा तत्व बच्चे हैं कोई अन्य तत्वों कि :nth-child() साथ हस्तक्षेप कर सकता साथ होगा। अन्य तत्वों में हस्तक्षेप कैसे हो सकता है इस पर एक स्पष्टीकरण के लिए this answer देखें। पर :nth-child() पर भी समीक्षा करें।

एक तरीका यह है कि और अधिक सरल है प्राप्त करने के लिए प्रत्येक तत्व की मूल नोड के बच्चे नोड्स लूप करने के लिए है, प्रत्येक बच्चे नोड एक तत्व नोड है उसके लिए प्रति (के बाद से :nth-child() केवल मायने रखता तत्व नोड्स) incrementing:

var selector = document.getElementsByClassName('hardware'); 

for (var i = 0; i < selector.length; i++) { 
    var element = selector[i]; 
    var child = element.parentNode.firstChild; 
    var index = 0; 

    while (true) { 
     if (child.nodeType === Node.ELEMENT_NODE) { 
      index++; 
     } 

     if (child === element || !child.nextSibling) { 
      break; 
     } 

     child = child.nextSibling; 
    } 

    element.dataset.number = index; 
}

JSFiddle demo

ध्यान दें कि यह जहां दिए गए तत्व डोम में है की परवाह किए बिना सही सूचकांक लागू होंगे:

यदि कोई विशेष section.hardware तत्व section के पहले और एकमात्र बच्चे हैं, तो इसे 1 का सही सूचकांक सौंपा जाएगा।

एक .hardware तत्व अपनी मूल की दूसरी संतान है, भले ही यह है कि वर्ग के साथ एक ही है (यानी यह वर्ग के बिना कुछ अन्य तत्व इस प्रकार है), यह 2 की सही सूचकांक आवंटित किया जाएगा, तो

स्रोत

2014-06-26 17:56:12 BoltClock

शुद्ध जावास्क्रिप्ट

उत्तर

संबंधित मुद्दे