Блог

У меня есть список, подобный этому.

    <ul>
     <li id="1">saurabh</li>
     <li id="2">sanjay</li>
     <li id="3">blah</li>
     <li id="4" parentID="3">chacha<li>
   </ul>
  

Предположим, теперь я добавляю другой элемент в список. Я хочу добавить цвет к этому специальному элементу. У меня будет список из 10 предопределенных цветов. Итак, я возьму первый цвет и удалю его из списка. Итак, в следующий раз, когда я беру цвет, первого цвета там нет.Теперь у этого специального элемента также могут быть дочерние элементы. Таким образом, все дочерние элементы будут иметь одинаковый цвет родительского элемента.

Как я могу добиться этого в java script?

Вот способ сделать это. Он использует синтаксис CSS3 для nth-of-type . Посмотрите эту демонстрацию:http://jsfiddle.net/alp82/2FAcS /

Разметка CSS

 ul#myList > li:nth-of-type(1) {
    color: red;
}
ul#myList > li:nth-of-type(2) {
    color: green;
}
ul#myList > li:nth-of-type(3) {
    color: blue;
}
  

HTML-разметка:

 <ul id="myList">
    <li>first item</li>
    <li>second item</li>
    <li>
        <p>third item, which has an embedded list</p>
        <ul>
            <li>first subitem</li>
            <li>second subitem</li>
        </ul>
    </li>
</ul>
  

Все дочерние элементы третьего элемента имеют одинаковый цвет.

Живая демонстрация

 var ulist = document.getElementsByTagName('ul')[0],
    colors = ['red', 'blue', '#eee313'];

function addListItem(list){
    var listItem = document.createElement('li');
    listItem.innerHTML = 'test item';
    if(colors.length > 0){
        listItem.style.background = colors[0];
        list.appendChild(listItem);
        colors.shift();
    }
}

setInterval(function(){addListItem(ulist)}, 2000);
  

Живая демонстрация 2 — Показывает, как родительский цвет li будет передан любым дочерним элементам.