在DOM中查找元素並替換

Question

我在這里有點堵塞，我試圖找到所有div元素在另一個div容器內，然后使用javascript替換匹配新div。

這是一個描述：

我有這些div

<div id="container">
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="oldclass">latency</div>
</div>

而我想要實現的是這一點

<div id="container">
    <div class="newclass1">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass2">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass1">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass2">latency</div>
    <div>latency</div>
    <div>latency</div>
    <div class="newclass1">latency</div>
</div>

但我真的很難用這個，我已經使用了childNodes，.match（），replace（）等等

非常感謝任何幫助，感謝您的時間

Answer 1

在下面的代碼中，我從文檔中選擇所有div節點並循環遍歷它們。 如果節點的類名等於“oldclass”，則將類名重命名為“newclass”。

elements = document.getElementsByTagName("div");
firstChanged = false;
for(i=0; i < elements.length; i++)
{
  if(elements[i].className == "oldclass")
  {
    elements[i].className = (firstChanged) ? "newclass2" : "newclass1";
    firstChanged = !firstChanged;
  }
}

編輯： firstChanged布爾值檢查腳本是否已經到了更改第一個匹配div的位置。

Answer 2

為什么不嘗試使用jQuery？ 使用jQuery，您可以輕松地執行以下操作：

$("div.oldclass:even").addClass("newclass1");
$("div.oldclass:odd").addClass("newclass2");

這將為所有偶數索引的DIV添加“newclass1”，其中“oldclass”為CSS類，將“newclass2”添加到所有奇數索引的DIV，其中“oldclass”為CSS類。

Answer 3

首先，做

nodes = document.getElementsByClassName('oldclass');

要么

nodes = document.querySelectorAll('.oldclass');

這是一個NodeList，可以類似於數組訪問，然后，做你需要做的事情。

我不確定你是否要求更改CSS類名，或者你是否要求完全替換div，如果是，那么從哪里來。

首先將NodeList復制到靜態數組：

nodes = Array.prototype.slice.call(nodes);

我們不希望nodes成為NodeList因為它們是實時的，並且在我們修改它們時會產生不可預測的結果。

如果要用新的元素替換所選元素，

nodes[i].parentNode.replaceChild(newChild, nodes[i]);

如果你想改變類名，就像在你的例子中那樣，先做兩行，然后這樣做：

nodes.forEach(function(node, i) {
    node.className = 'newclass' + (i % 2 ? 1 : 2);
});

我對你的問題不太清楚（問題的意圖和你的例子有所不同）所以我已經為兩種可能的意圖提出了建議。

Answer 4

我認為應該這樣做
僅限Javascript

//Select the container  
var div = document.getElementById("container");  
//find all div child with class = oldclass  
var divs = div.getElementsByClassName("oldclass");  
//then replace it  
for(var i = 0; i < divs.length; i++)  
{  
    if(i % 2)  
        divs[i].className = "newclass1";  
    else  
        divs[i].className = "newclass2";  
}
`  
//Using Jquery:  
`$("#container div.oldclass").each(function(i){  
        $(this).removeClass("oldclass").addClass("newclass" + (i % 2 ? 1 : 2));  
});

Answer 5

使用Jquery

var arr = $("#container").children(".oldclass");
var classname = "newclass1";
for(var i=oi<arr.length;i++) {
 $(arr[i]).attr("class",classname);
}

Answer 6

我做了這個使用jquery的小提琴： http ： //jsfiddle.net/Vk687/

Answer 7

如果你使用jQuery，你可以像這樣使用.each（）函數：

jQuery(".oldclass").each(function(index, domEle) {
    domEle.className = "newclass" + (index%2+1);
});

結果： http ： //jsfiddle.net/Achilleterzo/79kfF/