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/

在DOM中查找元素并替换

7 个答案: