Add a parent to several <li> tags

user_8698671 0
Viewed 108

So I have a code like this:

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

I want to wrap .item-2, .item-3, .item-4 into a parent with class .container using JS or jQuery, so the code becomes like this:

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

How to do it? What I've tried so far:

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

But the result is:

<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>
html jquery javascript
3 Answers

$('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>

You can use :gt and :lt selector with .wrapAll()

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

You can insert the div before item-2 and append its content with the required items:

$(".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>

user_13719950

You can easily achieve it using the SLICE function. SLICE functions is much more faster than the :gt and :lt methods.

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/

user_51363540
Related