在DOM中查找元素并替换

Question

i am in a bit of a jam here, i am trying to find all div elements that are inside of another div container and then replace the matches with a new div using just javascript.

Here is a description:

I have these divs

<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>

And what i want to achieve is this

<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>

But i am having a really hard time with this, i already used childNodes, .match(), replace(), etc etc

Any help is very much appreciated and thank you for your time

Answer 1

In the following code, i select all div nodes from the document and loop through them. If the classname of the node equals "oldclass", rename the classname to "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;
  }
}

The firstChanged boolean checks whether the script has come to the point of changing the first matching div.

Answer 2

Why not try using jQuery? With jQuery you can easily do it as follows:

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

This will add "newclass1" to all even indexed DIVs with "oldclass" as CSS class, and "newclass2" to all odd indexed DIVs with "oldclass" as CSS class.

Answer 3

First, do

nodes = document.getElementsByClassName('oldclass');

or

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

That is a NodeList which can be accessed similarly to an array, then, do what you need to do.

I'm not sure if you're asking to change the CSS class name, or if you're asking to replace the div completely, and if so, where from.

Copy the NodeList to a static array first:

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

We don't want nodes to be a NodeList as these are live and can have unpredictable results when we're modifying them.

If you want to replace the selected elements with new ones,

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

If you want to change the class names, like in your example, do the first two lines then this:

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

I'm not quite clear on your question (the intent of your question and your example differ) so I've made suggestions for both possible intents.

Answer 4

I think this should do
Javascript Only

//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

Using 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

If you using jQuery, you can use .each() function like this:

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

Result: http://jsfiddle.net/Achilleterzo/79kfF/