Variable and jQuery selector

Question

Ive been trying to figure this one out for about 2 days and cant understand why this isn't working.

Say for example I declare a variable "ul" and want to say var + li display red.

$("document").ready(function()  { 

var menu = $("ul");

$(menu +" li").css("color","red");

});

All list items should now be red. What am I doing wrong?

Example: http://jsbin.com/izela

Answer 1

To change all the direct children to red you can use

menu.children('li').css("color","red");

If you require all li's within the ul (nested ul>li>ul>li) then use .find

menu.find('li').css("color","red");

Answer 2

You should run something like this:

menu.children('li').css('color', 'red');

The problem is that menu is an object and adding string to an object return NaN (in FF) which cannot be used as a selector.

Answer 3

What you're doing wrong is adding a jQuery object with a string. Try:

var menu = $('ul');
menu.find('li').css('color', 'red');

Answer 4

try

menu.children('li').css('color', 'red');