[Resolvido] Alterar CSS de 3 em 3 ítens, porém em listas diferent

[Maykel-ctba 233]

Fala moçada bonita :lol:

 

Tenho o seguinte case:

 

                    <ul class="portfolio">
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-cartaz-100.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-cartaz-100.jpg" title="Luvas Yeling - Cartaz 100%" alt="uvas Yeling - Cartaz 100%" /><span>Luvas Yeling</span></a></li>
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-cartaz-limpeza.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-cartaz-limpeza.jpg" title="Luvas Yeling - Cartaz Limpeza" alt="Luvas Yeling - Cartaz Limpeza" /><span>Luvas Yeling</span></a></li>
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-cartaz-mulher.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-cartaz-mulher.jpg" title="Luvas Yeling - Cartaz Mulher" alt="Luvas Yeling - Cartaz Mulher" /><span>Luvas Yeling</span></a></li>
                   </ul>

                   <ul class="portfolio">
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-informativo-externo.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-informativo-externo.jpg" title="Luvas Yeling - Informativo (externo)" alt="Luvas Yeling - Informativo (externo)" /><span>Luvas Yeling</span></a></li>
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-informativo-interno.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-informativo-interno.jpg" title="Luvas Yeling - Informativo (interno)" alt="Luvas Yeling - Informativo (interno)" /><span>Luvas Yeling</span></a></li>
                   </ul>
                   <ul class="portfolio">
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-encarte-externo.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-encarte-externo.jpg" title="Luvas Yeling - Encarte (externo)" alt="Luvas Yeling - Encarte (externo)" /><span>Luvas Yeling</span></a></li>
                   	<li><a href="/site/content/portfolio/prints/hq-yeling-encarte-interno.jpg"><img class="tipsys" src="/site/content/portfolio/prints/yeling-encarte-interno.jpg" title="Luvas Yeling - Encarte (interno)" alt="Luvas Yeling - Encarte (interno)" /><span>Luvas Yeling</span></a></li>
                   </ul>

 

Como podem ver, são várias UL's com itens dentro.

Gostaria que a cada 3 itens, o javascript atribuisse um margin-right = 0.

 

Fiz a lógica em jQuery:

 

	$("#coluna-direita #conteudo.interno ul.portfolio li").each(function(index){
		var multiplo = (index+1) % 3;
		if(multiplo == 0)
		{
			$(this).css("margin-right","0");
		}
	});

 

Porém, se a lista tem menos de 3 itens, ele quebra no lugar errado o margin-right. Ele está somando todas as LIs das ULs, e deveria ser apenas de cada lista...

 

conseguiram entender?

 

Vou colocar uma imagem exemplificando:

 

 

Como podem ver, realmente na soma dos itens, ele está executando de 3 em 3. Mas são listas diferentes. Gostaria que quebrasse de 3 em 3, começando nas ULs.

 

Deu pra entender? rs

 

O que falta para a lógica funcionar?

[William Bruno 1501]

desculpe, mas pq você não faz tipo:

$(".portfolio li:last-child").css("margin-right","0");

?

 

lembre-se, que qndo mais você complicar o seletor sem necessidade, mais vai ficar lenta a aplicação.

[Maykel-ctba 233]

Mas ai ele pega só o último...

 

 

-- desculpe, errei um botão e editei teu post, em vez de responder --

[William Bruno 1501]

Okay, e você sempre quer a terceira ?

 

fácil:

$(".portfolio li").eq( 2 ).css("margin-right","0");

 

lembrando q o 2 é a terceira, pois começa no 0.

Ah, mas você quer os múltiplos de 3 ? então basta usar os seletores css!

 

:nth-child

http://api.jquery.com/nth-child-selector/

[Maykel-ctba 233]

Mas deste jeito, ele não vai "somar" as LI's das várias listas que estão na página, do mesmo jeito que está acontecendo hoje?

[William Bruno 1501]

Então dispara de UL por UL, assim ele pega de uma UL de cada vez.

 

Só testando você vai conseguir me dizer, se é preciso ou não fazer isso que eu disse.

[Maykel-ctba 233]

Credo, deu um bug aí em cima nas mensagens! :lol:

 

Deste jeito, não entraria no mesmo caso de somar as LIs das várias listas? Vai cair no mesmo caso!

[William Bruno 1501]

se rolar isso, então você terá que individualizar, assim:

 

$(".portfolio").each(function(){
  $( this ).find('li').eq( 2 ).css("margin-right","0"); //aplicando para os LIs, individualmente, UL a UL
});

[Maykel-ctba 233]

@William obrigado pelas opções! Estou até descobrindo alguns comandos que sequer existiam!

 

Porém, tentei destas maneiras e nenhuma ficou do jeito que esperava.

 

1) Só a primeira "tercina" aplica o margin-right, as outras posteriores não.

$(".portfolio li").eq( 2 ).css("margin-right","0");

 

2) Idem acima

$(".portfolio li:nth-child").css("margin-right","0")

 

3) Mesmo individualizando as UL's, ele fica com o mesmo resultado acima... apenas a primeira tercina é retirada a margem, veja:

		$(".portfolio").each(function(){
	   $(this).find('li').eq(2).css("margin-right","0");
	});

 

[William Bruno 1501]

ai q entra o nth-child:

http://api.jquery.com/nth-child-selector/

 

use :lol:

[Maykel-ctba 233]

AHAHAH!

 

@William

Tá certo?

 

		$(".portfolio").each(function(){
	   $(this).find('li:nth-child').css("margin-right","0")
	});		

 

Porque... não deu :ermm: agora todos tiveram suas margens cortadas, como se o nth-child não estivesse ali...

 

EDIT

 

Ops! Esqueci do parametro (n)... coloquei 2, não deu... 3, também não deu :unsure: Ocorreu os mesmos erros acima... só a primeira tercina tem sua mrgem retirada... :sick:

 

EDIT[2]

 

Pelo que li, esta condição nth-child você atribui um numero fixo, e não múltiplos... ou seja, se você atribui (2) e o item tem 4, ele só vai pegar o segundo item, e não o 2 e 4, vide o próprio exemplo do jQuery!

[William Bruno 1501]

você usou errado.. olha lá de novo... precisa informar qual o número de repetição...

 

se removeu tudo, então ele funcionou ne?! só q "demais".

[Maykel-ctba 233]

você usou errado.. olha lá de novo... precisa informar qual o número de repetição...

 

se removeu tudo, então ele funcionou ne?! só q "demais".

 

Mesmo utilizando o parametro N...

		$(".portfolio").each(function(){
	   $(this).find('li:nth-child(3)').css("margin-right","0")
	});		

 

É como se ele não pegasse os múltiplos, e sim sempre o TERCEIRO item, e não de 3 em 3...

[William Bruno 1501]

tem diferença entre 3 e 3n

 

o n é que faz o papel de multiplos. Quem trabalha com fixos, é o .eq()

 

 

:lol:

 

http://wbruno.com.br/2012/02/29/exemplo-de-uso-nth-child-seletor-css/

[Maykel-ctba 233]

PERFECT! Deu certinho!

 

Não sabia que poderia se aplicar um N para simbolizar os múltiplos! Demais esse recurso! E fica muito menos código também do que a maneira antiga que eu estava utilizando!

 

@William muito obrigado! (((((: