Вставка тега
Скажите пожалуйста, возможно ли такое сделать на 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, время: 18:50. |