Question

我有一些非常旧的服务器端代码，用于创建分页链接

<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>

使用jquery有一种简单的方法可以将div.pagination块中的所有内容转换为ul li元素吗？

每个标签都需要保留，很可能还有span标签。

任何想法都非常感激

Answer 1

这可以通过jquery完成，但实际上重写html肯定更合适。

但是，如果您想使用jquery进行转换，同时保留所有标记，则以下内容将正常工作。

示例

http://jsfiddle.net/8DsZA/

的 CODE

//select the original pagination div var container = $('.pagination'); //prepare a new list container var newContainer = $('<ul></ul>'); //iterate through all the children within the container and wrap them with a <li> tag container.children().each(function(i) { var item = $(container.children()[i]).clone().wrapAll("<div/>").parent().html(); newContainer.append('<li>'+item+'</li>'); }); //take out the old content container.empty(); //add the new html structure container.append(newContainer); //give the old div a new class container.addClass('paginationContainer'); //swap out the pagination class to the new 'pagination' container container.removeClass('pagination'); newContainer.addClass('pagination');

Answer 2

这应该可以解决问题：

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中。

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

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

将div内的内容转换为UL li

2 个答案:

示例

的 CODE