jQuery: конвертировать каждые четыре LI в один

Question

Я работаю над ползунком, где я хочу конвертировать каждые четыре LI в один LI.

Ползунок показывает LI с четырьмя элементами в то время. Я хочу, чтобы содержимое было SPAN, содержащимся в LI.

От: (один SPAN на LI)

<li><span>#Content</span></li> 
<li><span>#Content</span></li> 
<li><span>#Content</span></li> 
<li><span>#Content</span></li> 
<li><span>#Content</span></li> 
<li><span>#Content</span></li> 

... в: (четыре SPAN на LI)

<li><span>#Content</span><span>#Content</span><span>#Content</span><span>#Content</span></li> 
<li><span>#Content</span><span>#Content</span></li> 

Я не могу найти какую-либо информацию в Интернете , об этой технике. Что мне делать?

Есть ли смысл? К сожалению мой плохой английский ...

Answer 1

Вы можете перебрать с .slice() и .wrapAll(), как это:

var spans = $("li span").unwrap(); 
for(var i = 0; i < spans.length; i+=4) { 
    spans.slice(i, i+4).wrapAll("<li />"); 
} 

You can test it out here. То, что это делает, это .unwrap(), чтобы удалить исходные обертки <li>, затем, перейдя через вставки из 4, использует .slice(), чтобы получить набор, с которым мы работаем (он будет обрабатывать последние 4 или менее) и использовать .wrapAll() для этих <span> элементов для положите их в новый <li>.

Answer 2

Fetch содержание 4 литий и concatinate контента в одном литий Попробуйте использовать create_html.js (плагин) для создания литий эффективно