Найти элемент и заменить в DOM

Question

Я немного застрял здесь, я пытаюсь найти все элементы div, которые находятся внутри другого контейнера div, и затем заменить совпадения на новый div, используя только javascript.

Вотописание:

У меня есть эти дивы

<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 () и т. д.

Любая помощь очень ценится и спасибо за ваше время

Answer 1

Почему бы не попробовать использовать jQuery? С помощью jQuery вы можете легко сделать это следующим образом:

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

Это добавит «newclass1» ко всем четным индексированным DIV с «oldclass» в качестве класса CSS и «newclass2» ко всем нечетным индексированным DIV с «oldclass» в качестве класса CSS.

Answer 2

В следующем коде я выбираю все узлы 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.

Answer 3

Если вы используете jQuery, вы можете использовать функцию .each () следующим образом:

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

Результат: http://jsfiddle.net/Achilleterzo/79kfF/

Answer 4

Я сделал эту скрипку, которая использует jquery: http://jsfiddle.net/Vk687/

Answer 5

Использование Jquery

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

Answer 6

Я думаю, что это должно сделать
Только 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));  
});

Answer 7

Сначала выполните

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

Мне не совсем понятен ваш вопрос (цель вашего вопроса и ваш пример отличаются), поэтому я сделал предложения по обоим возможным намерениям.