2016-02-29 1 views
0

Я изо всех сил на некоторое время с этого упражнения (ниже моего HTML кода):Добавление данных, класс и стиль в HTML с JavaScript

<div class="exercise ex5"> 
    <h1>Zadanie 5</h1> 
    <ul> 
     <li data-direction="down"><a class="scroll" href="#home">home</a></li> 
     <li data-direction="down"><a class="scroll" href="#about">about</a></li> 
     <li><a class="scroll" href="#team">team</a></li> 
     <li><a class="scroll" href="#service">service</a></li> 
     <li><a class="scroll" href="#portfolio">portfolio</a></li> 
     <li data-direction="down"><a class="scroll" href="#blog">blog</a></li> 
     <li><a class="scroll" href="#contact">contact</a></li> 
    </ul> 
</div> 

Что мне нужно сделать, это: данные 1.Add - направление со значением «вверх» для каждого элемента, у которого еще нет

var lol = document.querySelectorAll(".ex5 li"); 
    for (var i =0;i<lol.length;i++) { 
     if (lol[i].hasAttribute === false) { 
    lol[i].setAttribute("data-direction", "up"); 
     }; 
     lol[4].hasAttribute("data-direction"); 
     console.log(lol[i]); 
    }; 

Возможно, мне следует использовать: нет ...?

2.Add «большой» класс пятый элемент моего списка

var lol = document.querySelectorAll(".ex5 li"); 
    for (var i =0;i<lol.length;i++) { 
     lol:nth-child(5).classList.add("big"); 
     }; 

3.Underline каждый третий элемент в моем списке.

var lol = document.querySelectorAll(".ex5 li"); 
    for (var i =0;i<lol.length;i++) { 
     lol:nth-child(-3n+6).style.textDecorationLine="underline"; 
     }; 

Это то, что я пытался сделать до сих пор .. ни один из моих кодов не работает, я очень beggining при кодировании, только начал свой путь, и все это очень запутанным для меня ...

ответ

1

1:

var lol = document.querySelectorAll(".ex5 li"); 
for (var i =0;i<lol.length;i++) { 
    if (!lol[i].hasAttribute("data-direction")) { 
     lol[i].setAttribute("data-direction", "up"); 
    } 
}; 

2:

var lol = document.querySelector(".ex5 li:nth-child(5)"); 
lol.classList.add("big"); 

3:

var lol = document.querySelectorAll(".ex5 li:nth-child(-3n+6)"); 
for (var i =0;i<lol.length;i++) { 
    lol[i].style.textDecorationLine="underline"; 
}