Geek asks and answers

Set of elements for children in div

I am trying to wrap a series of children in a div to manipulate them in groups; trying to arrange each group in a different place. The scenario is that I have a list of randomly generated tags liand no matter how many they appear, I need each set of ten to be processed separately.

To understand this, I use the following 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>
Run codeHide result

But this is not what I need, of course.

Here is the code I'm working on right 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 view works, but it creates nested instances of the shift class.

I need separate div wrappers. If I were to compile code, this would be:

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

But obviously, this will not work. Has anyone else done something like this before. I searched a bit unsuccessfully.

+5
2

. slice:

// note: different from nth-child, slice is 0-based position
$("ul li ul li").slice(c, c+10).wrapAll("<span class='shift' />");
+9
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>");
+2

More articles:


All Articles