Завернуть каждые 4-e li в div ?

[ilyas]

Имеется ненумерованный список

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>

Нужно завернуть по 4-е элемента списка li в div, вот как в таблице строка и в ней ячейки

<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>

Так же как в таблице хочу разбить на строки каждые 4-е li пример ниже

<ul>
<div>
<li>1</li><li>2</li><li>3</li><li>4</li>
</div>
<div>
<li>5</li><li>6</li><li>7</li><li>8</li>
</div>
</ul>

Как это сделать на xsl или на jQuery??? и будет ли это семантично? почему на xsl, потому что верстка предназначена для движка hostcms а на нем в качестве шаблонизатора используется xsl

Edited March 20, 2013 by ilyas

[mrnobody]

Внутри элемента <ul> можно ставить только элемент <li>, т.е. в вашем случае DIV'ы в него нельзя вставлять.

Edited March 20, 2013 by mrnobody

[ilyas]

Ну тогда переформулируем вопрос, как сделать так, выводятся по очереди 8 блоков div в родительском блоке с классом main, как обернуть каждые 4-е div в div с классом sub-main ???

Как это сделать на xsl???

<div class="main">
   <div class="sub-main">
	  <div>1</div><div>2</div><div>3</div><div>4</div>
   </div>
</div>
   <div class="sub-main">
	  <div>5</div><div>6</div><div>7</div><div>8</div>
   </div>

[Switch74]

можно на уровне PHP - самый оптимальный способ на мой взгляд

дальше идет js и css

js оббегаем все элементы по порядку и вставляем до и после нужных элементов нужные теги

css можно подумать о ::after и ::before для элементов в сочетании с :nth-child(4n), :nth-last-child(1) и :nth-child(1)

js и css могут не работать при определенных условиях

php может не подойти только если нужна динамика изменения организации выделенных блоков при изменении размеров окна

Edited March 21, 2013 by Switch74