कैसे एक div के बच्चे divs से अधिक लूप और बच्चे divs की आईडी प्राप्त करने के लिए?

Question

मेरे पास आईडी टेस्ट

और फ़ोरैच लूप के माध्यम से एक div है, मैं टेस्ट div के अंदर कुछ आंतरिक divs बना रहा हूं। तो यह इस तरह बन जाता है।

<div id="test"> 
<div id="test-1"></div> 
<div id="test-2"></div> 
<div id="test-3"></div> 
<div id="test-4"></div> 
</div> 

मैं माता पिता div id "परीक्षण" जावास्क्रिप्ट समारोह में हो रही है। अब मैं टेस्ट div के आंतरिक divs (child divs) के माध्यम से लूप करना चाहता हूं और प्रत्येक div की आईडी को एक-एक करके प्राप्त कर सकता हूं और उन्हें जावास्क्रिप्ट के माध्यम से स्टाइल कर सकता हूं।

इस बारे में कोई आइडिया?

Answer 1

आप jQuery .each() फ़ंक्शन का उपयोग करके आंतरिक divs के माध्यम से लूप कर सकते हैं। निम्नलिखित उदाहरण यह करता है, और प्रत्येक आंतरिक div के लिए, यह आईडी विशेषता प्राप्त करता है।

$('#test').find('div').each(function(){ 
    var innerDivId = $(this).attr('id'); 
}); 

Answer 2

प्रयास करें इस

var childDivs = document.getElementById('test').getElementsByTagName('div'); 

for(i=0; i< childDivs.length; i++) 
{ 
var childDiv = childDivs[i]; 
} 

Answer 3

उदाहरण के लिए आप

$('[id^=test-]') 

और each()

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

$('[id^=test-]').each(function(){ 
    var atId = this.id; 
    // do something with it 
});​ 

Answer 4

आप जो करने की कोशिश कर रहे हैं वह #test div के प्रत्यक्ष-वंशज divs के माध्यम से लूप है; आप > वंशज चयनकर्ता का उपयोग करके यह करना होगा, और jQuery .each() इटरेटर। आप क्रमशः आईडी को स्टाइल और पुनर्प्राप्त करने के लिए jQuery .css() और .attr() विधियों का भी उपयोग कर सकते हैं।

$("#test > div").each(function(index){ 
    var id = $(this).attr("id"); 
    $(this).css(/* apply styles */); 
}); 

Answer 5

jQuery का उपयोग करें।

इस कोड को अपनी आवश्यकताओं के addapted जा सकता है:

$testDiv = ​$('div#test')​​​​​​​​​​​​.first();  
$('div', $testDiv).css("margin", '50px');​​​​ 

Answer 6

यहाँ समाधान है कि अगर किसी को अभी भी के लिए लग रहा है यह

function getDivChildren(containerId, elementsId) { 
    var div = document.getElementById(containerId), 
     subDiv = div.getElementsByTagName('div'), 
     myArray = []; 

    for(var i = 0; i < subDiv.length; i++) { 
     var elem = subDiv[i]; 
     if(elem.id.indexOf(elementsId) === 0) { 
      myArray.push(elem.id); 
     } 
    } 
    return myArray; 
} 
console.log(getDivChildren('test', 'test-'));