Search code examples
javascriptjqueryhtmlcssbusiness-catalyst

jQuery nth with DIV

In Business Catalyst I have a div that outputs an unordered list. I need to out a separate div of non-unordered items after every 4th item. The hard coded version looks like this: 

<div class="article-list">
 <ul class="article-list grid">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
 </ul>


<div class="sponsored-post">
 <ul class="sponsored-post grid">
   <li>Hardcoded Item 1</li>
   <li>Hardcoded Item 2</li>
 </ul>
</div>

<div class="article-list">
 <ul class="article-list grid">
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
 </ul>
</div>
Solution

  • Use jQuery .each() and keep track of a variable in your loop. If that counter is divisible by 4, then append a div to the <li>

    $(".article-list").each(function(i, value) {
    if(i % 4 == 0) {
        newDiv = $("<div></div>").html("new div");
        $(this).append(newDiv);
    }
});