CODEWITHSUNDEEP
javascriptdom
Shadow
Shadow

Reputation: 4763

Find element and replace in DOM

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

Upvotes: 3

Views: 809

Answers (7)

Bang Dao
Bang Dao

Reputation: 5102

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

Upvotes: 1

Achilleterzo
Achilleterzo

Reputation: 742

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/

Upvotes: 1

Steven Ryssaert
Steven Ryssaert

Reputation: 1967

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 come to the point of changing the first matching div.

Upvotes: 3

CyberDude
CyberDude

Reputation: 8959

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

Upvotes: 1

FarligOpptreden
FarligOpptreden

Reputation: 5043

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.

Upvotes: 3

druveen
druveen

Reputation: 1691

Using Jquery 

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

Upvotes: 1

Delan Azabani
Delan Azabani

Reputation: 81384

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.

Upvotes: 1

Related Questions