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

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

• javascript
• dom

7 Answers 7

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

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

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.

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 pletely, 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.

Using Jquery

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

I made this fiddle that uses jquery: http://jsfiddle/Vk687/

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/Achilleterzo/79kfF/

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