所以我有这样的代码:
<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>
答案 0 :(得分:6)
$('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>');
答案 1 :(得分: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>
答案 2 :(得分:1)
您可以使用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>