5

I'm trying to wrap a range of children elements in div in order to manipulate them in groups; trying to position each group in a different place. The scenario is that I have a list randomly generating li tags and no matter how many appear I need every set of ten to be manipulated separately.

To figure this out I'm using a written out list:

$("ul li ul li:nth-child(n+11)").wrapAll("<span class='shift' />");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="access">
  <div class="menu">
    <ul>
      <li>
        <p>Hello</p>
        <ul>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff2</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>
          <li>Stuff3</li>

        </ul>
      </li>
    </ul>
  </div>
</div>

But this isn't what I need of course.

Here's the code I'm working on now.

var count = $("ul li ul li").length;
for(var c = 11; c<=count;c+=10){
$("ul li ul li:nth-child(n+"+c+")").wrapAll("<span class='shift' />");
}

This kind of works but it creates nested instances of the shift class.

I need separate wrapper divs. If I was to make up code it would be:

 $("ul li ul li:nth-child("+c+"<n<"+(c+10)+")").wrapAll("<span class='shift' />");

But obviously that won't work. Anyone else do something like this before. Been searching a bit with no success.

double-beep
  • 5,031
  • 17
  • 33
  • 41
Zack Brady
  • 110
  • 2
  • 11

2 Answers2

9

You could try .slice method:

// note: different from nth-child, slice is 0-based position
$("ul li ul li").slice(c, c+10).wrapAll("<span class='shift' />");
xdazz
  • 158,678
  • 38
  • 247
  • 274
  • Woot. There we go. That's what I needed. I saw the slice before but for some reason didn't think it would work ... I may be staring at screens for too long. Thanks. – Zack Brady Jul 10 '12 at 03:24
2
var i=0;
$(".menu ul ul li:first-child").before("<div>");
$(".menu ul ul li").each(function(){
    i++;
    if(i % 10==0){
        $(this).after('</div><div>')
    }
});
$(".menu ul ul li:last-child").after("</div>");
Max Hudson
  • 9,961
  • 14
  • 57
  • 107
  • `$(".menu:first-child")` selects elements with class `.menu` that are the first child of their parents (and likewise with `:last-child` for last child elements). Also, `$(".menu").each()` iterates over all elements with the class `.menu`, not its list-items. – nbrooks Jul 10 '12 at 03:39
  • I was in a hurry when I was typing the code. that should work now. Thanks for the catch – Max Hudson Jul 10 '12 at 03:46
  • 1
    +1 no prob, it's a cool solution. side note -- `( i % 10==0)` is a nice way to check for int divisibility – nbrooks Jul 10 '12 at 03:50
  • didn't know that. I'll use it from now on – Max Hudson Jul 10 '12 at 03:55