Question

我有一些像这样的代码：

<div id="gallery">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
</div>

我想用jQuery重写它来生成：

<div id="gallery">
    <ul id="carousel">
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</div>

最好的方法是什么？

Answer 1

示例： http://jsfiddle.net/pB98T/

$('#gallery > a').wrapAll('<ul id="carousel">').wrap('<li>');

这会将所有<a>元素与<ul id="carousel"> using .wrapAll()包装在一起，然后使用<li> using .wrap()单独包装它们。

Answer 2

这应该这样做：

$("#gallery a").wrap("<li />").parent().wrapAll("<ul id='carousel' />")

You can test it here（添加一些CSS以查看结果更清晰）。请务必在.parent()之后致电.wrap()，因为.wrap()会返回原始元素（<a>，而不是新的<li>父级）。

Answer 3

一行：

$('#gallery').wrapInner('<ul id="carousel"/>').find('a').wrap('<li/>');

或两行：

$('#gallery a').wrap('<li/>');
$('#gallery').wrapInner('<ul id="carousel"/>');

Answer 4

$('#gallery a').each(function() {
    $(this).wrap('<li  class="liclass"/>');
});

$('.liclass').wrapAll('<ul class="ulclass"/>');

参考： .wrap ， .wrapAll

您可以测试其功能 http://jsbin.com/iluxe4

在jQuery中的list标签中包装锚点

4 个答案: