Вставка тега
Скажите пожалуйста, возможно ли такое сделать на js, чтобы через каждые пять тегов, например
<div id="name">бла-бла</div> <div id="name">бла-бла</div> <div id="name">бла-бла</div> <div id="name">бла-бла</div> <div id="name">бла-бла</div> вставлялся <div id="foo"> ? |
(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);
}
}
}
})();
|
Цитата:
Цитата:
|
Идентификатор (id="name") в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.
|
Можете дать пожалуйста пример как это полностью должно работать с js и html, а то я по разному пробовал, и никак!
|
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>
|
О спс, все работает!
|
А можно еще вот так реализовать? У меня допустим:
<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> |
Цитата:
|
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>
|
| Часовой пояс GMT +3, время: 04:35. |