将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=&page=2">2</a>
<a href="/article/the-hub?i=&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屋!