views:

60

answers:

2

With jQuery 1.4.2, I can't figure out how to combine has() with :gt. I'd like to select any <ul> which contains more than 3 <li>s, so here's what I've tried:

$(document).ready(function(){  
  $("ul.collapse:has(li:gt(2))")  
    .each( function() {  
       $(this).css("border", "solid red 1px");  
  });  
});  

This does work with the 1.2.6 jQuery library, but not 1.3.2 or 1.4.2.

I'd appreciate any help in understanding what's going on here. Thanks!

A: 

Try .filter()

$("ul").filter(function(){
    return $(this).find("li").length > 4;
}).each(function(){
    // your code   
});
rahul
+1  A: 

Try using nth-child:

$('ul').has('li:nth-child(3)').css('border', 'solid red 1px');

Working Example: http://jsbin.com/opape3

This selector didn't work for some reason: $("ul.collapse:has(li:nth-child(3))")

Kobi
Reading the question again, you're probably asking why one worked and the other didn't.
Kobi
Yes, thanks, the snippet using nth-child works for me. (And seems simpler, too!) Though, curiously, not with the 1.2.6 library; though I can see nth-child was added in 1.1.4.
KatieK