Why children for a selector not works in jquery?

Question

I am trying to change background color of li having a class with jquery children , but it is not working. Following is the url where I test it : http://jsfiddle.net/kFUqK/1/

I changed the code

$('ul.level-2').children().css('background-color', 'red');
$('ul.level-2').children('.level-33').css('background-color', 'blue');

to

//$('ul.level-2').children().css('background-color', 'red');
$('ul.level-2').children('.level-33').css('background-color', 'blue');

Then I found li.level-33 has not changed with its background.

Any reason for this?

Answer 1

From the jQuery docs:

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

So you want find .