-2

I have a generic list

<ul>
  <li>list item1</li>
  <li>list item2</li>
  <li>list item3</li>
  <li>list item4</li>
  <li>list item5</li>
  <li>list item6</li>
</ul>

But what I want to do is

<div class="list">
  <ul>
    <li>list item1</li>
    <li>list item2</li>
    <li>list item3</li>

  </ul>
</div>

<div class="list">
  <ul>
    <li>list item4</li>
    <li>list item5</li>
    <li>list item6</li>

 </ul>

I have used this script but its only showing 2 li element in 1 div my reqirement is to make 3 li in one div

    $('ul > li:nth-child(2n-1)').each(function() {
    $(this).next().add(this).wrapAll('<div class="list"><ul></ul></div>');
}).eq(0).closest('div').unwrap();
McMuffinDK
  • 431
  • 3
  • 13
ASHU
  • 94
  • 7

1 Answers1

3

$('ul > li:nth-child(3n-2)').each(function() {
  $(this).next().add($(this).next().next()).add(this).wrapAll('<div class="list"><ul></ul></div>');
}).eq(0).closest('div').unwrap();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>list item1</li>
  <li>list item2</li>
  <li>list item3</li>
  <li>list item4</li>
  <li>list item5</li>
  <li>list item6</li>
</ul>

The key was to use 3n-2 to target the right elements (1st, 4th and so on), then add to set the 2 next sibblings, and wrap.

You were very close!

Salketer
  • 14,263
  • 2
  • 30
  • 58
  • Actually i want 3 li in one div using this its not working – ASHU Oct 06 '17 at 16:24
  • it is, run the code snippet to have the proof... – Salketer Oct 06 '17 at 16:26
  • https://jsfiddle.net/sensex00007/ u can chek it here...can u please modified here – ASHU Oct 06 '17 at 16:28
  • no I will not. I provided you with the solution to your question already. You should better explain what you want or at least say what's not working. – Salketer Oct 06 '17 at 16:29
  • https://jsfiddle.net/sensex00007/mwpd3vgm/1/ can u chek it here now i added jquery in my fiddler – ASHU Oct 06 '17 at 16:37
  • hi Salker i want item1,item2,item3 inone div or in one box here is my jsfiddle can u please check it and update me what mistake i m doing https://jsfiddle.net/sensex00007/mwpd3vgm/1/ – ASHU Oct 06 '17 at 18:05
  • just read your script, read the script in my answer and see what's wrong... There is no point in having someone else rewrite your script everytime you make a mistake.... It's better to learn by correcting them yourself. I have told you what needed to be done in plain text too. Please, pretty please, take time to read and re-read my answer and do some work yourself. Or else you'll never learn and always will need to ask the same questions here over and over! – Salketer Oct 06 '17 at 20:47
  • HI Salker I did as your told me but still not able to get the result what i am aspected still my 3 item are not coming in one div , my item3 is coming out of the box ..can you please tell me what mistake I am still doing. https://jsfiddle.net/sensex00007/mwpd3vgm/2/ – ASHU Oct 07 '17 at 06:02
  • HI Salker , thanks now its working .... here is my updated jsfiddle https://jsfiddle.net/sensex00007/mwpd3vgm/13/ – ASHU Oct 07 '17 at 09:58