CODEWITHSUNDEEP
jquery
Meules
Meules

Reputation: 1389

split unordered lists with same class

I'm trying to split a few ul's which have the same class "dropdown_4columns". I want to wrap every 15th li item in a div called "column". The script I use does that actually but grabs li items from the next ul dropdown_4columns. So how can I just split the li items for just the current list. I can't use css3 columns and can't change classes or id's. It's all generated automatically! I tried to use closest, find and $this but without any luck :(

<ul class="nav clearfix">
  <li class="item">
     <ul class="dropdown_4columns">
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
  </li>
  <li class="item">
     <ul class="dropdown_4columns">
       <li></li>
       <li></li>
     </ul>
  </li>
  <li class="item">
     <ul class="dropdown_4columns">
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
     </ul>
  </li>
</ul>

Jquery

$().ready(function(){  

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

Upvotes: 0

Views: 91

Answers (5)

DevlshOne
DevlshOne

Reputation: 8457

Neat and simple... works like a charm.

var items = $('.dropdown_4columns li');
$.each(items,function(i,v) {
    if (i == 14) $(this).wrapAll('<div class="column"></div>');
});

jsFiddle

or

$('li:eq(14)').filter(function() {
    return $(this).parent().hasClass('dropdown_4columns');
}).wrapAll('<div class="column"></div>');

Upvotes: 1

palaѕн
palaѕн

Reputation: 73906

You can do this:

$('.dropdown_4columns').each(function () {

    // Check the number of lis in each div with class 'dropdown_4columns'
    // This is for debug purpose only, you can remove it if you want..
    console.log('Length: ' + $(this).children('li').length);

    // Get all the lis in each div with class 'dropdown_4columns'
    var divs = $(this).children('li');

    // Use your code now
    for (var i = 0; i < divs.length; i += 15) {
        divs.slice(i, i + 15).wrapAll("<div class='column'></div>");
    }
});

LIVE DEMO

Upvotes: 1

Richard
Richard

Reputation: 6344

You need to loop through the ULs and then loop through the LIs:

$(".dropdown_4columns").each(function)) {
    var divs = $(this).children("li");
    //split code here
});

(untested, just for concept)

Upvotes: 1

reyaner
reyaner

Reputation: 2819

try it like this:

var divs = $("ul.dropdown_4columns").first().find("li");

Ye, if you want all, then like so:

$("ul.dropdown_4columns").each(function(){
   $(this).find("li")...
});

Upvotes: 1

pythonian29033
pythonian29033

Reputation: 5207

okay here's the code you're looking for:

$(document).ready(function(){
   $("ul.dropdown_4columns").each(function(){
      var fifteenthLi = $(this).children("li").eq(14);
      fifteenthLi.replaceWith("<div class='column'>" + fifteenthLi[0].outerHTML + "</div>")
   });
});

Upvotes: 1

Related Questions