Find an element and replace it in the DOM

I'm a little crazy here, I'm trying to find all the div elements that are inside another div container, and then replace the matches with the new div using only javascript.

Here is the 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

<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 have a very hard time with this, I have already used childNodes, .match (), replace (), etc. etc.

Any help is greatly appreciated and thanks you for your time.

+3
source share
7 answers

In the following code, I select all the div nodes from the document and look through them. If the class name of the node is "oldclass", rename the class name 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 buffer checks if the script has arrived at the change point of the first matching div.

+3

jQuery? jQuery :

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

"newclass1" DIV " " CSS "newclass2" DIV " " CSS.

+3

-, do

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

( ), .

+1
source

I think this should be done. 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));  
});
+1
source

Using jQuery

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

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

+1
source

If you use jQuery, you can use the .each () function as follows:

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

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

+1
source

Source: https://habr.com/ru/post/1795433/


All Articles