Как выбрать 2-й <LI>элемент с помощью JavaScript?

Question

Используя JavaScript, как я могу динамически изменить один из элементов списка ниже из этого:

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">Two</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

до

<ul class="tabbernav">
<li class="tabberactive"><a title="All">All</a></li>
<li class=""><a title="One">One</a></li>
<li class=""><a title="Two">-----------NEW LIST ITEM CHANGED---------</a></li>
<li class=""><a title="Three">Three</a></li>
</ul>

Answer 1

Полагаю, вы можете использовать getElementsByTagName внутри ul, чтобы получить все элементы списка внутри массива. Затем вы можете просто отредактировать третий элемент в вашем массиве с индексом № 2.

var lItems = document.getElementsByTagName("ul").getElementsByTagName("li");
lItems[2].innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----</a>";

Это, конечно, приведет к получению всех элементов ul на странице и может привести к некоторым странным результатам, если в вашем документе более двух ссылок. Но вы поняли, верно? Просто спросите еще, если вы не понимаете, что я пытаюсь сказать.

Хорошо, приведенный выше код на самом деле не работает должным образом. Я немного изменил свой код, но это также включило изменение в вашем HTML, так как я предполагаю, что у вас будет только один ul "tabbernav", поэтому я изменил его с class="tabbernav" на id="tabbernav". Это код, чтобы делать то, что вы хотите.

var ul = document.getElementById("tabbernav");
var liArray = ul.getElementsByTagName("li");

for (var i = 0; i < liArray.length; i++) {
    if(liArray[i].childNodes[0].title == "Two") {
        liArray[i].innerHTML = "Your desired output";
    }
}

Надеюсь, это поможет вам еще немного:)

Answer 2

Я также предлагаю использовать jQuery, который делает выборки подобными этим тривиальным. В вашем случае вы можете использовать: eq psuedo-selector для получения второго элемента строки:

$('.tabbernav li:eq(1)')

Выбирает элемент DOM, который является секундным li (индексы начинаются с 0) в элементе с классом tabbernav. Он возвращает объект jQuery, с которым вы можете связать другие методы. Изменение внутреннего HTML выполняется с помощью .html («Ваш HTML здесь»).

Answer 3

Вот как вы выбираете третий элемент Li из вашего списка Ul в чистом JavaScript.

document.querySelectorAll("li")[2].innerHTML = "vasile";

Замените "Vasile" на нужный текст.

Answer 4

Я знаю, что этот вопрос старый, но поскольку он все еще открыт, посмотрите, как я изменил первый ответ. Я чувствую, что это может понадобиться кому-то еще.

>var lItems = document.getElementsByTagName("ul")[0];
>>var nth = lItems.getElementsByTagName("li")[2];
>>>nth.innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>";

Таким образом, это в основном решает проблему путем указания позиции элементов, в частности, для захвата и в этом случае [0]. Код не будет работать должным образом, если эта позиция отсутствует, потому что getElementsByTagName (NAME) возвращает коллекцию элементов html, содержащих указанное NAME. Так что, если вы не укажете, какие из них все, код завершится ошибкой.

Если вам нравится повторное использование кода, посмотрите функцию, которую вы можете использовать для этого. Вам просто нужно указать родительский элемент, его позицию и позицию childNode, и вы получите то же самое.

>var nthChild = function(parent, pos, childPos){
>>parent = document.getElementsByTagName(parent)[pos];
>>>return parent.children[childPos];
>>>>};
//used thus:
>nthChild("ul", 0, 2).innerHTML = "<a title='Two'>----NEW LIST ITEM CHANGED-----> </a>

---

";

Answer 5

var list = document.getElementsByTagName("li");
list[2].innerHTML = "<a title='Two'>------NEW LIST ITEM CHANGED----</a>";

это будет отлично работать

Answer 6

Как определить, какой <li> тот, который вы хотите изменить?

Если вы делаете это по индексу, вы можете сделать что-то вроде этого, я думаю:

var list = document.getElementById("listid");
list.childNodes[2].innerHtml = "<a title='Two'>-----------NEW LIST ITEM CHANGED---------</a>";

Answer 7

Изучите использование библиотеки Javascript, такой как JQuery. Это сделает вашу жизнь намного проще. Тогда вы можете сделать что-то вроде этого:

$('li a[title=Two]').text('Changed Text Goes Here');

Вам нужно проверить мой синтаксис (не уверен насчет функции text()), но это достаточно легко найти в api docs JQuery.