Ir para conteúdo

POWERED BY:

Arquivado

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

Deives

[Resolvido] jQuery - Acessar itens de uma lista

Recommended Posts

Eai pessoal!

 

Gostaria de saber como acessar determinados itens de uma lista não ordenada, mas não utilizando :eq(x), por exemplo:

 

<ul class="menu">
    <li>1</li>
    <li>2
        <ul>
            <li>2.1</li>
            <li>2.2
                <ul>
                    <li>2.2.1</li>
                    <li>2.2.2
                        <ul>
                            <li>2.2.2.1</li>
                            <li>2.2.2.2</li>
                            <li>2.2.2.3</li>
                        </ul>
                    </li>
                    <li>2.2.3</li>
                </ul>
            </li>
            <li>2.3</li>
        </ul>
    </li>
    <li>3</li>
</ul>

Com base na lista acima quero acessar os primeiros e ultimos itens, que no caso são: 2.2.1 - 2.2.3 e 2.2.2.1 - 2.2.2.3

 

Obs: menos da primeira sublista: 2.1, 2.2 e 2.3

 

Utilizando o seguinte código: $("ul.menu li ul li:has(ul)").find("a:first").addClass("sub"), eu consigo adicionar a classe sub em todos os itens que pussuem sublista, podendo ser, por exemplo, uma seta indicando pro usuário que existe outro nível.

 

Espero ter explicado corretamente(rs) e agradeço a ajuda!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deives,

 

Montei um exemplo aqui: http://javascript.singuska.com/exemplos/deives

 

	var listEdges = {
		
		alreadyFound: {},
	
		alter: function(ul, doAction) {
	
			var ul = $(ul), that = this;
	
			ul.find('li:first-child, li:last-child,').each(function(){
				
				var  li = $(this), liText = li.text();
				
				if (!that.alreadyFound[liText] && $(this).has('ul').length <= 0) {
					that.alreadyFound[liText] = true;
					doAction($(this));
				}
			});
		}
	};
	
	$(function(){
		
		$('.menu ul li ul').each(function(){
			listEdges.alter(this, function(liElement){
				liElement.css('color', 'red');
			});
		});
	
	});

Este exemplo só funciona com jQuery 1.4 porque utilizei o novo método .has(). Não vai funcionar se você tiver dois textos iguais dentro de LIs diferentes. Com ele você pode mudar a raiz da árvore alterando $('.menu ul li ul') e alterar o que a função realiza. No exemplo ela muda uma propriedade CSS liElement.css('color', 'red') mas você pode fazer qualquer coisa, como adicionar uma classe CSS.

 

É isso aí, espero que funcione.

 

Um abraço...

Flávio

http://javascript.singuska.com

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.