Добавляйте элемент li вокруг каждой второй метки <span>с помощью jQuery - PullRequest
Новая
       2

Добавляйте элемент li вокруг каждой второй метки <span>с помощью jQuery

1 голос
/ 19 октября 2010

не знаю, возможно ли это .. Я хочу добавить элемент li в каждый второй тег span. Мой HTML выглядит так: 

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

<span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

В конце все должно выглядеть так: 

<li>
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>

    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
</li>
<li>  
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
    <span class="article_item"><img src="images/container_item.jpg" /><h2><a href="">Nokia Connecting N97</a></h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mattis lectus.</p></span>
</li>

Есть идеи? Спасибо:)

1 Ответ

3 голосов
/ 19 октября 2010

Вы можете использовать .wrapAll() и .slice() в цикле, например: 

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

Вы можете проверить это здесь, обязательно сделайте что-то подобное в конце, так как <li> элементам нужен родительский элемент: 

$("li").wrapAll("<ul />");
...