Geek Answers Handbook

Wrap the nth or less element, the wrong result

I have a popup menu in wordpress and I have a little problem with wrap nth (every 4th element) li.

My code

<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
    <ul class="sub-menu">
        <li> Test1</li>
        <li> Test2</li>
    </ul>
</li>
<li id="item4">
    <ul class="sub-menu">
        <li> Test3</li>
        <li> Test4</li>
        <li> Test5</li>
        <li> Test6</li>
        <li> Test7</li>
        <li> Test8</li>
        <li> Test9</li>
        <li> Test10</li>
        <li> Test11</li>
        <li> Test12</li>
    </ul>
</li>

JQuery code

var divs = $("ul.sub-menu > li");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='column'></div>");
}

My results (wrong)

   <li id="item1"> ... </li>
   <li id="item2"> ... </li>
   <li id="item3">
       <ul class="sub-menu">
           <div class="column">
               <li> Test1</li>
               <li> Test2</li>
               <li> Test3</li>
               <li> Test4</li>
           </div>   
       </ul>
   </li>
   <li id="item4">
       <ul class="sub-menu">
           <div class="column">
               <li> Test5</li>
               <li> Test6</li>
               <li> Test7</li>
               <li> Test8</li>
           </div>   
           <div class="column">
               <li> Test9</li>
               <li> Test10</li>
               <li> Test11</li>
               <li> Test12</li>
           </div>   

       </ul>
   </li>

I am trying to achieve:

   <li id="item1"> ... </li>
   <li id="item2"> ... </li>
   <li id="item3">
       <ul class="sub-menu">
           <div class="column">
               <li> Test1</li>
               <li> Test2</li>
           </div>   
       </ul>
   </li>
   <li id="item4">
       <ul class="sub-menu">
           <div class="column">
               <li> Test3</li>
               <li> Test4</li>
               <li> Test5</li>
               <li> Test6</li>
           </div>   
           <div class="column">
               <li> Test7</li>
               <li> Test8</li>
               <li> Test9</li>
               <li> Test10</li>
           </div>
           <div class="column">
               <li> Test11</li>
               <li> Test12</li>
           </div>   

       </ul>
   </li>

any idea what am i doing wrong? This is necessary because "item3" and "item4" are diffrents categories and my li code elements are mixed if there are less than 4 elements in the first ul line

+4
source share
1 answer

Wow, what you just did, I didn’t know that it was possible. :) In any case:

$('.sub-menu').each(function() {
    var children = $(this).find('> li');
    for (var i = 0; i < children.length; i+=4) {
        children.slice(i, i+4).wrapAll("<div class='column'></div>");
    }
});

, , , .

http://jsfiddle.net/9NUwJ/

+4

More articles:


All Articles