Question

Im using tabber.js (http://www.barelyfitz.com/projects/tabber/) to create a list of tabs then I’m using a columniser function to columnise the information in the tabs.

However my jquery selector isnt working: $(‘(“div.tabberlive div”).not(“.tabbertabhide”) ul’). I had $(‘div.tabbertab ul’) which I thought would work on all tabs and show as normal but it columnised the hidden tabs and showed them as well. I am hoping that making it more specific to the div which is visible (which has no unique class to target unfortunately) would help.

My HTML is as follows:

<div class="tabberlive">
  <ul class="tabbernav">...</ul>
  <div class="tabbertab "><ul>...</ul></div>
  <div class="tabbertab tabbertabhide"><ul>...</ul></div>
  <div class="tabbertab tabbertabhide"><ul>...</ul></div>
  <div class="tabbertab tabbertabhide"><ul>...</ul></div>
</div>

The columniser function is:

$(document).ready(function(){
  var size = 6,
      $ul  = $('("div.tabberlive div").not(".tabbertabhide") ul'),
      $lis = $ul.children().filter(':gt(' + (size - 1) + ')'),
      loop = Math.ceil($lis.length / size),
      i    = 0;

  $ul.css('float', 'left').wrap("<div style='overflow: hidden'></div>");

  for (; i < loop; i = i + 1) {
    $ul = $("<ul />").css('float', 'left').append($lis.slice(i * size, (i * size) + 6)).insertAfter($ul);
  }
});

Ive tried to guess the selector but obviously failed… any help greatly appreciated!

Answer 1

That’s not the good syntax.

You may use this :

$('div.tabberlive div:not(.tabbertabhide) ul')

Alternatively you could use

$('div.tabberlive div').not('.tabbertabhide').find('ul')

not lets you filter a jQuery set by removing the unwanted elements.

find gives you the matching elements among the descendants.