Como usar o this em uma classe

[Vitor Presutti 1]

Olá,

 

Como não achei uma aba especifica para JQuery resolvi postar minha dúvida aqui.

 

Não estou conseguindo usar o 'this' em um objeto dentro de um seletor.

 

Exemplo:

 

quero selecionar o seletor 'img usando this,' que está dentro da div de classe .conteudo

(o erro que acontece é que todos os seletores 'img' sofrem com o efeito mesmo usando this.)

 

 

 

Agradeceria muito se alguém resolvesse minha dúvida.

 

 

(se não estiver muito claro por favor avise)

[cahe7cb 27]

Se não me engano se sua seleção retornar vários elementos o "this" vai se referir a todos eles, não tem jeito, o que você pode fazer é mudar seu seletor para selecionar apenas o único elemento que você quer. Poderia postar aqui a parte do código onde você faz a seleção?

[iMatch 0]

Olá,

Tente esse código:

$('.conteudo img').each(function(){
$(this);//NO CASO ELE SELECIONA TODAS AS IMGS DENTRO DE .conteudo
});

[Vitor Presutti 1]

Foi mal, falei errado a duvida ¬¬


eu estou tentando fazer com que uma div ao lado apareça, só que como tem varias divs com a mesma classe no codigo todas aparecem

[cahe7cb 27]

Tem que ter algo que diferencie eles, alguma propriedade, um ID ou a ordem talvez... Eles possuem algum desses quesitos?

[Vitor Presutti 1]

Tem que ter algo que diferencie eles, alguma propriedade, um ID ou a ordem talvez... Eles possuem algum desses quesitos?

 

Não... queria achar uma alternativa sem recorre a isso, pois é uma área de postagens, dai ficariam muitos códigos, o que acredito que carregaria um pouco a página, dai estava vendo a possibilidade de fazer algo do gênero com o 'this'

[cahe7cb 27]

Poderia dar mais detalhes sobre a funcionalidade da página? E um exemplo de como fica a estrutura HTML dela?

[reebr 94]

<div class = 'minha-div'>
  <a href = '#'>A</a> <!-- index: 0 -->
  <a href = '#'>B</a> <!-- index: 1 -->
</div>

Você pode pegar o index do elemento. Por exemplo, tendo o HTML acima, o script seria:

<script>
  $(document).ready(function(){
    $('.minha-div a').on('click', function(){

      switch($(this).index()) { /* var index = $(this).index(); 
                                   switch (index) {} */
          case 0: alert("CLICOU NO A"); break;
          case 1: alert("CLICOU NO B"); break;
       }
    });
});
</script>

[Vitor Presutti 1]

Poderia dar mais detalhes sobre a funcionalidade da página? E um exemplo de como fica a estrutura HTML dela?

Seguinte, a página tem de 1 a 5 estruturas como essa abaixo:

<div class='conteudo'>

	<div class='cabecalho-conteudo'>

		<div class='foto-conteudo'  >
		<img src='' class='foto-user-conteudo' stretch>

						
		</div>

		<div class='titulo-data-autor-conteudo'>

			<div class='titulo-conteudo'>	</div>

		        <div class='data-autor-conteudo'>

								
			         <div class='data-conteudo'></div>
		                 <div class='autor-conteudo'></div>


		        </div>
	        </div>
        </div>


        <div class='texto-conteudo'>
							
											
	</div>
</div>

Eu queria que ao passar sobre a div de classe "foto-conteúdo" mostrasse a div de classe "autor-conteudo" DESTA estrutura, pois quando tento são mostradas todas as divs de mesma classe.

 

 

 

Essa ideia do index me parece interessante, vou testar.

[cahe7cb 27]

Ficou mais fácil, só saber para onde andar.

foto-conteudo ->
titulo-data-autor-conteudo ->
	data-autor-conteudo ->
		>> autor-conteudo <<

Algo como:

foto2autor = function(foto){
    var $next = $(foto).next('.titulo-data-autor-conteudo'),
        $parent = $next.children('.data-autor-conteudo'),
        $autor  = $parent.children('.autor-conteudo');
    return $autor;
};
$('.foto-conteudo').hover(function(){
    foto2autor(this).fadeIn();
}, function(){
    foto2autor(this).fadeOut();
});

http://jsfiddle.net/FGS4v/

[Vitor Presutti 1]

Ficou mais fácil, só saber para onde andar.

foto-conteudo ->
titulo-data-autor-conteudo ->
	data-autor-conteudo ->
		>> autor-conteudo <<

Algo como:

foto2autor = function(foto){
    var $next = $(foto).next('.titulo-data-autor-conteudo'),
        $parent = $next.children('.data-autor-conteudo'),
        $autor  = $parent.children('.autor-conteudo');
    return $autor;
};
$('.foto-conteudo').hover(function(){
    foto2autor(this).fadeIn();
}, function(){
    foto2autor(this).fadeOut();
});

http://jsfiddle.net/FGS4v/

 

 

Muito bom! Vlw!

 

Você poderia me explicar como funciona essa função children?

[cahe7cb 27]

As funções next e children, são restritores de seleção, por exemplo:

$('.classe1');

Seleciona todos os elementos da página que tem [inline]classe1[/inline].

 

Já

$('#meudiv').children('.classe1');

Seleciona todos os elementos que tem [inline]classe1[/inline] e que estão dentro de [inline]#meudiv[/inline].

 

A mesma coisa é para a função [inline]next[/inline], só que ela seleciona os elementos "irmãos" do elemento anterior, por exemplo:

$('#meudiv').next('.classe1');

Seleciona todos os elementos que tem [inline]classe1[/inline] e estão dentro do mesmo elemento "pai" que [inline]#meudiv[/inline].

[Vitor Presutti 1]

Obrigado!

 

Tentei implementar mas algo não deu certo, você poderia verificar o porquê?

 

http://jsfiddle.net/FGS4v/8/

 

 

Era para quando passasse o mouse em cima da foto também mostrasse a div .nm

[Vitor Presutti 1]

Obrigado!

 

Tentei implementar mas algo não deu certo, você poderia verificar o porquê?

 

http://jsfiddle.net/FGS4v/8/

 

 

Era para quando passasse o mouse em cima da foto também mostrasse a div .nm

 

Faltou o ponto e virgula, tá resolvido, muito obrigado!