在DOM中查找元素并替换

时间:2011-03-01 08:50:39

标签: javascript dom

我在这里有点堵塞,我正在尝试找到另一个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()等等。

非常感谢任何帮助,感谢您的时间

7 个答案:

答案 0 :(得分:3)

在下面的代码中,我从文档中选择所有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的位置。

答案 1 :(得分:3)

为什么不尝试使用jQuery?使用jQuery,您可以轻松地执行以下操作:

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

这将为所有偶数索引的DIV添加“newclass1”,其中“oldclass”为CSS类,“newclass2”为所有奇数索引的DIV,其中“oldclass”为CSS类。

答案 2 :(得分:1)

首先,做

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);
});

我对你的问题不太清楚(问题的意图和你的例子有所不同)所以我已经为两种可能的意图提出了建议。

答案 3 :(得分:1)

我认为应该这样做 仅限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));  
});

答案 4 :(得分:1)

使用Jquery

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

答案 5 :(得分:1)

我使用jquery制作了这个小提琴:http://jsfiddle.net/Vk687/

答案 6 :(得分:1)

如果你使用jQuery,你可以像这样使用.each()函数:

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

结果:http://jsfiddle.net/Achilleterzo/79kfF/