Форум

faforty · #1 (**permalink**) 15.04.2011, 18:37

Скажите пожалуйста, возможно ли такое сделать на js, чтобы через каждые пять тегов, например
<div id="name">бла-бла</div>
<div id="name">бла-бла</div>
<div id="name">бла-бла</div>
<div id="name">бла-бла</div>
<div id="name">бла-бла</div>
вставлялся <div id="foo"> ?

Matre · #2 (**permalink**) 15.04.2011, 18:44

(function () {
	var elems = document.getElementsByTagName("*");
	for (var i = 0, j = 0; i < elems.length; i++) {
		if (elems[i].id == "name") {
			if (++j % 5 === 4) {
				var div = document.createElement("DIV");
				div.id = "foo";
				elems[i].parentNode.insertBefore(elems[i], elems[i].nextSibling);
			}
		}
	}
})();

faforty · #3 (**permalink**) 15.04.2011, 20:28

Сообщение от Matre

(function () {
	var elems = document.getElementsByTagName("*");
	for (var i = 0, j = 0; i < elems.length; i++) {
		if (elems[i].id == "name") {
			if (++j % 5 === 4) {
				var div = document.createElement("DIV");
				div.id = "foo";
				elems[i].parentNode.insertBefore(elems[i], elems[i].nextSibling);
			}
		}
	}
})();

Сообщение от Matre

Не работает

Magneto · #4 (**permalink**) 15.04.2011, 21:02

Идентификатор (id="name") в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

faforty · #5 (**permalink**) 15.04.2011, 21:41

Можете дать пожалуйста пример как это полностью должно работать с js и html, а то я по разному пробовал, и никак!

рони · #6 (**permalink**) 15.04.2011, 23:43

faforty,
Рабочий вариант ...

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">
.foo{
  background-color: Red;
   height: 25px;
}
</style>
<script type="text/javascript">
window.onload=function () {
	var elems = document.getElementsByTagName("*");
	for (var i = 0, j = 0; i < elems.length; i++) {
		if (elems[i].className == "test") {
			if (++j % 5==0) {
				var div = document.createElement("DIV");
				div.className = "foo";
				elems[i].parentNode.insertBefore(div,elems[i].nextSibling);
			}
		}
	}
};
</script>
</head>
<body>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
<div class="test">бла-бла</div>
</body>
</html>

faforty · #7 (**permalink**) 16.04.2011, 06:53

О спс, все работает!

faforty · #8 (**permalink**) 16.04.2011, 08:04

А можно еще вот так реализовать? У меня допустим:
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>

и надо из этого сделать так, чтобы получились такие блоки:
<div class="inner-matrix">
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="clr"></div>
</div>
<div class="inner-matrix">
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="clr"></div>
</div>

monolithed · #9 (**permalink**) 16.04.2011, 10:45

Сообщение от faforty

А можно еще вот так реализовать?

можно

рони · #10 (**permalink**) 16.04.2011, 10:50

faforty,
А самому попробовать научиться ?

<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">
.clr{background:#FFD700;border:SaddleBrown 2px dashed;height:12px;margin:4px;}
.inner-matrix{background:#0F0;border:SaddleBrown 2px dashed;margin:4px;}
.video-box{background:#FFA500;border:SaddleBrown 2px dashed;margin:4px;}
</style>
<script type="text/javascript">
window.onload = function () {
    for (var b = document.getElementsByTagName("*"), a = 0, e = 0; a < b.length; a++) {
        var c = b[a];
        if (c.className == "video-box") {
            e++;
            if (e % 6 == 1) {
                var d = document.createElement("DIV");
                d.className = "inner-matrix";
                b[a].parentNode.insertBefore(d, c)
            }
            d.appendChild(c);
            if (e % 6 == 0) c = document.createElement("DIV"), c.className = "clr", d.appendChild(c)
        }
    }
};
</script>
</head>
<body>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
<div class="video-box">бла-бла</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript