Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jadsonlucena

Nó de Lista

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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";

Compartilhar este post


Link para o post
Compartilhar em outros sites

"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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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)

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É 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>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.