Question

所以我有这样的代码：

<ul>
 <li class='item-1'>...</li>
 <li class='item-2'>...</li>
 <li class='item-3'>...</li>
 <li class='item-4'>...</li>
 <li class='item-5'>...</li>
</ul>

我想使用JS或jQuery将.item-2, .item-3, .item-4包装到类.container的父级中，因此代码如下：

<ul>
 <li class='item-1'>...</li>
 <div class='container'>
  <li class='item-2'>...</li>
  <li class='item-3'>...</li>
  <li class='item-4'>...</li>
 </div>
 <li class='item-5'>...</li>
</ul>

该怎么做？到目前为止，我已经尝试过：

$(".item-2").before("<div class='container'>");
$(".item-4").after("</div>");

但是结果是：

<ul>
 <li class='item-1'>...</li>
 <div class='container'></div>
 <li class='item-2'>...</li>
 <li class='item-3'>...</li>
 <li class='item-4'>...</li>
 <li class='item-5'>...</li>
</ul>

Answer 1

$('ul li:gt(0):lt(3)').wrapAll('<div class="container"></div>');

.container {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='item-1'>1</li>
  <li class='item-2'>2</li>
  <li class='item-3'>3</li>
  <li class='item-4'>4</li>
  <li class='item-5'>5</li>
</ul>

您可以将:gt和:lt选择器与.wrapAll()一起使用

$('ul li:gt(0):lt(3)').wrapAll('<div class="container"></div>');

Answer 2

您可以将div插入item-2之前，并在其内容后面附加必填项：

$(".item-2").before("<div class='container'>");
$(".container").append($('.item-2'));
$(".container").append($('.item-3'));
$(".container").append($('.item-4'));

console.log($('ul').html());

.container{
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class='item-1'>...</li>
  <li class='item-2'>...</li>
  <li class='item-3'>...</li>
  <li class='item-4'>...</li>
  <li class='item-5'>...</li>
</ul>

Answer 3

您可以使用SLICE功能轻松实现它。 SLICE函数比：gt和：lt方法要快得多。

var i = 1;
var n = 4;
$(".list_wrap li").slice(i, n).wrapAll("<div class='container'></div>");

.container{border:1px solid #000;background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list_wrap">
 <li class='item-1'>item 1</li>
 <li class='item-2'>item 2</li>
 <li class='item-3'>item 3</li>
 <li class='item-4'>item 4</li>
 <li class='item-5'>item 5</li>
</ul>

https://jsfiddle.net/rajeevRF/1jeudn2b/5/

将父项添加到几个<li>标签

3 个答案: