如何選擇第二名 <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

我猜你可以在ul里面使用getElementsByTagName來獲取數組中的所有列表項。 然后，您可以編輯數組中的第三個元素，索引號為2。

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

那將在頁面上獲取所有ul元素，如果你的文檔中有兩個以上的uls，可能會導致一些奇怪的結果。 但是你明白了，對嗎？ 如果你不明白我想說的話，可以再詢問一下。

好的，上面的代碼並沒有真正正常工作。 我已經修改了一下我的代碼，但是這也改變了你的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)')

這將選擇具有類tabbernav的元素中的第二個 li（索引從0開始）的DOM元素。 它返回一個jQuery對象，您可以將其他方法鏈接到該對象。 改變內部HTML是用.html（'你的html here'）完成的。

Answer 3

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

這將是完美的

Answer 4

我知道這個問題很老但是因為它仍然是開放的，看看我是如何修改第一個答案的。 我覺得別人可能需要它。

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

因此，基本上通過指定lItems的位置來解決它，特別是抓取並且在這種情況下[0]。 如果缺少該位置，代碼將無法正常工作，因為getElementsByTagName（NAME）返回帶有指定NAME的html元素的集合。 因此，如果您沒有指定其中的哪一個，則代碼將失敗。

如果您喜歡代碼重用，請參閱您可以使用的功能。 你只需要指定父元素及其位置和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

這是您在純JavaScript中選擇Ul列表的第三個Li元素的方法。

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

將“Vasile”替換為您想要的文字。

Answer 6

您如何確定哪個<li>是您要修改的？

如果你是通過索引做的，你可以做這樣的事情我想：

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

Answer 7

考慮使用JQuery等Javascript庫。 這將使你的生活更輕松。 然后你可以做這樣的事情：

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

你需要檢查我的語法（不確定text()函數），但是很容易在JQuery的api文檔中查找。