Nó de Lista

[jadsonlucena 0]

Como resgato só os filhos(li) da "ol - (main)"?

 

Script:

window.onload = function() {
var menu = document.getElementById('main').childNodes;
	alert(menu.length);
};

 

 

Lista:

<ol id="main">
	<li>
		<h4>texto 1</h4>
		<ul>
			<li><a href="">texto 1.1</a></li>
			<li><a href="">texto 1.2</a></li>
			<li><a href="">texto 1.3</a></li>
		</ul>
	</li>
	<li>
		<h4>texto 2</h4>
		<ul>
			<li><a href="">texto 2.1</a></li>
			<li><a href="">texto 2.2</a></li>
			<li><a href="">texto 2.3</a></li>
		</ul>
	</li>
	<li>
		<h4>texto 3</h4>
		<ul>
			<li><a href="">texto 3.1</a></li>
			<li><a href="">texto 3.2</a></li>
			<li><a href="">texto 3.3</a></li>
		</ul>
	</li>
</ol>

 

No caso era para aparecer três filhos mas aparecem sete.

 

ONDE ESTOU ERRANDO?

 

Grato desde já pela ajuda dos senhores. ;-P

[Danilo Soncini 15]

Na Verdade acredito ser os espaços em branco que esta usando entre as <li>, estão gerando nós de texto ... tente utilizar o método console.dir(variavel); assim você vê os valores do objeto que foi retornado.

 

no seu exemplo retorna 4 nos #text e 3 nós de <li>;

 

Como sou um usuário de JQuery a solução pra mim é utilizar:

 

<script>
$('#main li').lentgh;
</script>

 

Ou pode comparar qual o tipo do nó lendo a propriedade "nodeName" de cada item e compara-lo com "LI";

[jadsonlucena 0]

"Danilo Soncini" desta forma não funciona em javascript, porque ao invés dele reconhecer apenas as LI filhas ele irá reconhecer todas as LI's do menu!

 

tentei desta forma mas ele fica alternando entre 1, 3 e 5:

window.onload = function() {
var menu = document.getElementById('main').childNodes;

for (var i = 0; i < menu.length; i++) {
 		if(menu[i].tagName == 'LI') {
 			alert(i);
 		}
}

};

gostaria que ele lesse corretamente: 1 ,2 e 3.

Alguém conheceria alguma forma eficaz de resolver isso?

 

Grato pela ajuda! ;-P

[William Bruno 1501]

ok, vamos lá.

 

Assim você vai pegar TODOS os LIs, até os netos da OL:

var menu = document.getElementById('main').getElementsByTagName('li');

 

 

 

E assim, eu pego apenas os filhos diretos da OL:

window.onload = function() {
var main = document.getElementById('main');
var menu = main.getElementsByTagName('li');

   for (var i = 0; i < menu.length; i++) {
	if( menu[i].parentNode===main )
	{
		console.log('Este eh filho direto');
	}
   }

};

acho que com querySelector é bem mais simples de fazer, mas não sei qual compatibilidade de browsers você precisa.

 

Ah, com jQuery seria:

$('#main > li')

apenas para ficar registrado.(jQuery utiliza o querySelector)

[jadsonlucena 0]

Galera não é querendo explorar, mas eu necessito de um exemplo ou a correção do meu script em javascript. Pois evito plugin's desnecessariamente!

 

O exemplo que você me deu ainda fica pulando entre 0, 4 e 8. Como faço para ele ter uma sequencia linear?

EX: 0, 1 e 2

 

Grato desde já pela ajuda e compreensão dos senhores.

[William Bruno 1501]

com querySelector você vai ter a sequencia linear, fora isso, o retorno 0, 4 e 8 está completamente correto.

 

você esta se atentando ao detalhe errado. Não é o 0, 1 2 q importa, mas selecionar os nós corretos ne?!

Com um outro contador q só é incrementado dentro do IF, você pode fazer o teu 0, 1 e 2.

[pedropss 0]

É só retirar os espaços em branco da lista...

 

Lista:

        <ol id="main"
               ><li>
                       <h4>texto 1</h4>
                       <ul>
                               <li><a href="">texto 1.1</a></li>
                               <li><a href="">texto 1.2</a></li>
                               <li><a href="">texto 1.3</a></li>
                       </ul>
               </li
               ><li>
                       <h4>texto 2</h4>
                       <ul>
                               <li><a href="">texto 2.1</a></li>
                               <li><a href="">texto 2.2</a></li>
                               <li><a href="">texto 2.3</a></li>
                       </ul>
               </li
               ><li>
                       <h4>texto 3</h4>
                       <ul>
                               <li><a href="">texto 3.1</a></li>
                               <li><a href="">texto 3.2</a></li>
                               <li><a href="">texto 3.3</a></li>
                       </ul>
               </li
       ></ol>