Как вставить теги в нужное место?
Есть код:
<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>
<ul>
<li>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>
Нужно через каждые три дива, которые формируются динамически, добавить теги "</li><li>". Пытаюсь сделать так:
<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>
<ul>
<li id="li">
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>
var s = document.getElementsByClassName('dv').length;
var li = document.getElementById('li');
var dv = document.getElementsByClassName('dv');
var i = 3;
while (i <= s) {
var txt = document.createTextNode('</li><li>');
li.insertBefore(txt, dv[i]); //добавляем перед след. элементом
i += 3;
}
"createTextNode" не хочет выводить теги в виде тегов, только текстом выводит. Подскажите как правильно вставить теги, чтобы получилось так: <ul> <li> <div class="dv">111</div> <div class="dv">111</div> <div class="dv">111</div> </li><li> <div class="dv">111</div> <div class="dv">111</div> <div class="dv">111</div> </li><li> <div class="dv">111</div> <div class="dv">111</div> <div class="dv">111</div> </li><li> <div class="dv">111</div> <div class="dv">111</div> <div class="dv">111</div> </li><li> <div class="dv">111</div> </li> </ul> |
Странная задача. Вы не ищите легких путей? Почему сразу не выводить div-ы как положено, оборачивая в <li> ?
|
Они выводятся динамически. Их может быть 5, а может быть 20. Нужно автоматизировать растановку "</li><li>"
|
Цитата:
Нужно делать список, а в каждый элемент кидать по 3, уже существующих, дива. |
Понятно что выводятся динамически. Нельзя завести счетчик и подсчитывать их, вставляя где нужно открывающй </li> ?
|
Цитата:
Как вариант.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
li {
border:solid 1px;
}
li+li {
margin-top: 5px;
}
.dv {
width:300px;
height:30px;
border:solid 1px;
margin:5px;
}
</style>
<script type="text/javascript">
function test() {
var o=document.getElementById('li');
var ou=o.parentNode;
o=o.getElementsByTagName('div');
var i=0,ol;
while (o[3]) {
if (i%3==0) {
ol=document.createElement('li');
ou.appendChild(ol);
};
ol.appendChild(o[3]);
i++;
};
};
</script>
</head>
<body>
<ul>
<li id="li">
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>
<button onclick='test()'>Go</button>
</body>
</html>
|
SFproG,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style type="text/css">
.dv {width:300px; height:30px; border:solid 1px; margin:5px;}
</style>
</head>
<body>
<ul>
<li>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
<div class="dv">111</div>
</li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName('ul')[0];
var li = ul.getElementsByTagName('li')[0];
var fr = document.createDocumentFragment()
var n = 0;
while (li.children.length>3) {
n %=3;
if (n==0) {var li_new = document.createElement('li');
fr.appendChild(li_new)
}
li_new.appendChild(li.children[3]);
n++
}
ul.appendChild(fr)
</script>
</body>
</html>
|
Цитата:
Можно сразу формировать список
<script>
function cr(){
var nd=20;//число дивов
var ul=document.createElement('ul');
for(var i=0;i<nd;i+=3)
{
var li=document.createElement('li');
for(var y=0;y<3;y++)
{if(i+y==nd)break;
var d=document.createElement('div');
var txt = document.createTextNode('trat'+i+''+y);
d.appendChild(txt);
li.appendChild(d);
};
ul.appendChild(li);
};
document.body.appendChild(ul);
alert(document.body.innerHTML);
}
</script>
<body>
<button onclick=cr()>create</button>
|
Цитата:
Почему б тогда не генерировать весь код сразу на стороне клиента? |
Цитата:
Может он не в сосотоянии повлиять на генерацию контента... |
| Часовой пояс GMT +3, время: 17:14. |