[Resolvido] Jquery: não selecionar os filhos

[marcelo2605 10]

Nesta estrutura:

 

<ul id="menu">
<li>item1</li>
<li>item2
   	<ul id="submenu">
       	<li>subitem 1</li>
       	<li>subitem 2</li>
       	<li>subitem 3</li>
       	<li>subitem 4</li>
       </ul>
   </li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>

 

Como eu seleciono apenas os itens principais, não os subitens?

 

Tentei isso mas não deu certo:

 

$("#menu > li").css('color', 'red');

[Vadio 13]

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

[marcelo2605 10]

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

 

Mas aí eu seleciono tudo. Preciso selecionar somente os itens e não os subitens.

[Vadio 13]

$('#menu').children().each(function(){
   if($(this).children().length == 0 ) $(this).css('background-color','red');
});

[William Bruno 1501]

Está correto o seletor com >

 

o problema de "parecer não ter funcionado" é que os LIs do submenu herdaram o color do LI pai deles.

se você executar assim, por exemplo:

http://jsfiddle.net/cWWZb/

 

verá q estava certo.

[marcelo2605 10]

William, entendi.

 

Mas porque essa mesma lógica não se aplica a uma função por exemplo. Quero que os subitens não sejam clicáveis

 

$("#menu > li").click(function(e) {
   alert('clicado');
});

 

mas não funcionou

[William Bruno 1501]

ai temos outro problema cara..

 

 

um click no filho é um click no pai. Ai começamos a falar sobre propagation do evento.

http://jsfiddle.net/cWWZb/2/

[marcelo2605 10]

Hummmmmm, agora resolveu. Obrigado!