将div内的内容转换为UL li [英] Convert Content inside div to UL li

问题描述

我有一些非常旧的服务器端代码可以创建分页链接。

 < div class =pagination> 
< span class =previous>< / span> 
< span class =current> 1< / span> 
< a href =/ article / the-hub？i =& amp; page = 2> 2< / a> 
< a href =/ article / the-hub？i =& amp; page = 2class =next> NEXT< / a> 
< / div> 
  

使用jquery将div.pagination块中的所有内容转换为ul li元素？

每个标签都需要保留，很可能还有span标签。想法非常感谢

解决方案

这应该会有诀窍：

  var $ ul = $（< ul>）; 
 $（。pagination）。children（）。each（function（）
 {
 var $ li = $（< li>）。append（$（this） ）; 
 $ ul.append（$ li）; 
}）; 
 $（。pagination）。append（$ ul）; 
  

jsFiddle ： http://jsfiddle.net/hescano/5TZgb/

虽然我们可能会直觉地认为我们正在重新创建DOM元素，我们不是。此代码只是用 li 标签包装Div的子元素，并将元素重新放置在DOM中。

如果你想要一个更具体的选择器，你可以尝试：

$ $ p $ $ $ $（。pagination span，.pagination a）。each function（）{...}）;

I have some very old server side code that creates pagination links

<div class="pagination ">
    <span class="previous"></span>
    <span class="current">1</span>
    <a href="/article/the-hub?i=&amp;page=2">2</a>
    <a href="/article/the-hub?i=&amp;page=2" class="next">NEXT</a>
</div>

Is there an easy way with jquery to convert all the content within the div.pagination block to be ul li elements ?

Each a tag would nee to remain, and quite possibly the span tags also.

Any ideas greatly appreciated

解决方案

This should do the trick:

var $ul = $("<ul>");
$(".pagination").children().each(function()
{
    var $li = $("<li>").append($(this));
    $ul.append($li);
});
$(".pagination").append($ul);

jsFiddle: http://jsfiddle.net/hescano/5TZgb/

While we might intuitively think that we are re-creating the DOM elements, we are not. This code simply wraps the Div's children with li tags, and re-places the elements in the DOM.

If you want a more specific selector, you may try:

$(".pagination span, .pagination a").each(function() { ... });

这篇关于将div内的内容转换为UL li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！