Jak wybrać wszystkie elementy podrzędne z elementu javascript i zmienić właściwość CSS?

Question

Pracuję nad projektem, który ma element div z 32 dziećmi. Potrzebuję utworzyć menu rozwijane, które zmieni tło każdego elementu div i elementu nadrzędnego. Dla innych części projektu, które nie mają dzieci, używam następujący kod:

function changediv(color) { 
document.getElementById('div1').style.background = color; 
} 

HTML:

<select> 
<option onClick="changediv('#555');">Hex</option> 
<option onClick="changediv('blue');">Colorname</option> 
<option onClick="changediv('url(example.com/example.png)');">Image</option> 
</select> 

mogę tylko dodać inny identyfikator dla każdego dziecka (ID1 , id2, id3, ...), ale jest 32 dzieci i nie tylko będę musiał dodać 32 identyfikatory, ale także 32 linie JavaScript. Musi istnieć lepszy sposób; w jakiś sposób wybierając dzieci, a nawet zmieniając rzeczywisty kod CSS, który wybiera dzieci.

Dzięki, Ian

Answer 1

Chociaż można to zrobić w jednej linii z jQuery, jestem przy założeniu, że nie używasz jQuery - w takim przypadku, Twój kod będzie:

var nodes = document.getElementById('ID_of_parent').childNodes; 
for(var i=0; i<nodes.length; i++) { 
    if (nodes[i].nodeName.toLowerCase() == 'div') { 
     nodes[i].style.background = color; 
    } 
} 

Zobacz http://jsfiddle.net/SxPxN/ dla szybkie przykład stworzyłam - kliknij na „zmiana„em”, aby zobaczyć go w akcji

Answer 2

spróbuje użyć poniżej kody:

var nodes = document.getElementById('ID_of_parent').getElementsByTagName("div"); 
for(var i=0; i<nodes.length; i++) { 
    nodes[i].style.background = color; 
}