Форум

SFproG · #1 (**permalink**) 08.02.2013, 07:45

Есть код:

<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>

danik.js · #2 (**permalink**) 08.02.2013, 07:51

Странная задача. Вы не ищите легких путей? Почему сразу не выводить div-ы как положено, оборачивая в <li> ?

SFproG · #3 (**permalink**) 08.02.2013, 08:02

Они выводятся динамически. Их может быть 5, а может быть 20. Нужно автоматизировать растановку "</li><li>"

ksa · #4 (**permalink**) 08.02.2013, 08:28

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

Нужно автоматизировать растановку "</li><li>"

Нужно не это вставлять...

Нужно делать список, а в каждый элемент кидать по 3, уже существующих, дива.

danik.js · #5 (**permalink**) 08.02.2013, 08:41

Понятно что выводятся динамически. Нельзя завести счетчик и подсчитывать их, вставляя где нужно открывающй </li> ?

ksa · #6 (**permalink**) 08.02.2013, 08:46

Сообщение от danik.js

завести счетчик и подсчитывать их, вставляя где нужно открывающй </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>

рони · #7 (**permalink**) 08.02.2013, 09:03

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>

vadim5june · #8 (**permalink**) 08.02.2013, 09:13

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

Нужно через каждые три дива, которые формируются динамически, добавить теги "</li><li>".

В DOM теги вставлять нельзя только элементы
Можно сразу формировать список

<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>

danik.js · #9 (**permalink**) 08.02.2013, 09:17

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

Этот вариант ошибочен...

А вариант генерировать код не тот что нужен, а потом поправлять его через javascript - не ошибочен? Да уж..

Почему б тогда не генерировать весь код сразу на стороне клиента?

ksa · #10 (**permalink**) 08.02.2013, 09:30

Сообщение от danik.js

Почему б тогда не генерировать весь код сразу на стороне клиента?

Это уже к автору.

Может он не в сосотоянии повлиять на генерацию контента...

Форум

Справочник

Discord чат

Курсы javascript