Sibling + selector not working in IE7 when using jQuery

Question

Trying to select sibling element using jQuery and it does not work in IE7.

Here is my sample code: http://jsfiddle.net/y7AHz/6/ (click "Run" to see the result)

var numberOfListItems = $("#txtInput + ul.ulContainer li").length;
$("#output").text(numberOfListItems);

In IE8, Firefox, Safari it works (# from the itmes list goes to 3).

Answer 1

This is a known bug with sizzle (a selection mechanism for jQuery) in IE6 and 7. Instead, use .next()that which is equivalent to the selector +or next adjacent, and .find(). This is more verbose, but it works in IE6 +:

var numberOfListItems = $("#txtInput").next(".ulContainer").find("li").length;

Updated jsFiddle

Answer 2

IE7:

var foo= $("#txtInput + ul.ulContainer");
var numberOfListItems = $('li', foo).length;

 $("#output").text(numberOfListItems);

, , ...

Answer 3

try only this, it works in ie7 also

var numberOfListItems = $("ul.ulContainer li").length;