Question

我试图用嵌套的ul包装单个li标签。例如，我希望第一个HTML片段成为第二个：

Snippet＃1

          <ul class="lof-main-wrapper">
            <li class="featured">
              <h3><a href="#">Title</a></h3>
              <a href><img src="" /></a>
              <p class="kicker"></p>
              <p class="summary"></p>
            </li>

            <li class="featured">
              <h3><a href="#">Title</a></h3>
              <a href><img src="" /></a>
              <p class="kicker"></p>
              <p class="summary"></p>
            </li>
           </ul>

Snippet＃2

          <ul class="lof-main-wrapper">
            <ul>
             <li class="featured">
               <h3><a href="#">Title</a></h3>
               <a href><img src="" /></a>
               <p class="kicker"></p>
               <p class="summary"></p>
             </li>
            </ul>

            <ul>
             <li class="featured">
               <h3><a href="#">Title</a></h3>
               <a href><img src="" /></a>
               <p class="kicker"></p>
               <p class="summary"></p>
             </li>
            </ul>
           </ul>

我目前正在使用.wrap（）函数，它可以实现我想要的功能，但它会将子元素复制到每个嵌套的ul中，为DOM添加的内容比应该多的内容。

如果不煞费苦心地使用.remove（）方法去除重复项，我该如何防止重复发生？

仅供参考 - 我是jQuery和JS的新手，因此您可以提供任何方向。

谢谢，

Brion的

Answer 1

你不应该将它包装到<ul>直接在<ul>内的地方，因为那是无效的标记。

但是，您可以使用.wrap()在<li>内部使用{{3}}有效地将它们包装起来，以包装选择器找到的每个元素，如下所示：

<ul>

Answer 2

使用wrap method

$('.lof-main-wrapper li').wrap('ul');

但正如@Nick在他的回答中提到的那样，你想要做的事情是无效的，用HTML来表示。

关于你提到的重复，你必须向我们展示你使用的jQuery代码..

如何使用相同的标签包装单个元素？

2 个答案: