Ação em div's com mesmo "id", tem como separar? jquery.

[leandro_re9artes 3]

Olá galera, minha DUVIDA é se tem como fazer que um efeito especifico aconteça somente na div onde o mouse está, não em todas pois, criei um loop com o banco de dados e gostaria que o icone de lixeira aparecesse somente na imagem em questão. O caso é que o codigo (simples ) que criei afeta todas as imagens pois todas recebem o mesmo 'id'. Não sou programador em java script e sei muito pouco de jquery.... poderiam me dar uma luz.?

 

olha o que eu fiz:

<?php
//este codigo esta em loop trazendo informações do banco de dados  
 echo'
    <div class="contain_box_data" id="contain_box_data">
    	<div class="cont_button">
        	<a class="tt_agen">'.$tt_agen.'</a>
                <a href="#" id="sett" >
                <img src="../public/image/ico/ico_20.png" align="right"/>
                </a>	
        </div><!--cont_button-->
        <div class="cont_data">
        	<a id="img_agen" href="box_controll/public/view/include/customer_art_agen.php?act=alt&id='.$id_agen.'">
                <img src="../public/image/'.$pasta6.'/'.$img_agen.'"/></a>
                <a class="data_img">'.$dt.'</a>
        </div><!--cont_data-->
    </div><!--contain_box_data-->
    ';

	
	}// abaixo o codigo Jquery que faz aparecer o icone da lixeira.	
	?>

<script type="text/javascript">
$(document).ready(function(){
		
	$( "a#sett" ).fadeOut( "slow", "linear" );
		$( "a#img_agen>img" ).hover(function() {
  			$("a#sett" ).fadeToggle( "slow", "linear" );
                  });
		
})
</script>	

obrigado.

[William Bruno 1501]

Não duplique IDs e use o DOM para percorrer seus elementos, leia:

 

http://wbruno.com.br/jquery/navegando-no-dom-jquery/

[leandro_re9artes 3]

desculpa william, eu entendi o esquema de pais e filhos mas meu raciocínio não conseguiu transferir para este caso...porque....

tenho uma div pai que por sua vez tem duas divs filhos>>>>> a div filho 1(acima) tem duas ancoras como filho e uma delas tem uma img como filho. a outra div é a mesma coisa...como apontar o evento sendo que exitem ancoras irmas e elas tambem tem img como filho???

[William Bruno 1501]

primeiro, troque teu html:

 echo'
    <div class="contain_box_data">
    	<div class="cont_button">
        	<a class="tt_agen">'.$tt_agen.'</a>
                <a href="#" class="sett" >
                <img src="../public/image/ico/ico_20.png" align="right"/>
                </a>	
        </div><!--cont_button-->
        <div class="cont_data">
        	<a class="img_agen" href="box_controll/public/view/include/customer_art_agen.php?act=alt&id='.$id_agen.'">
                <img src="../public/image/'.$pasta6.'/'.$img_agen.'"/></a>
                <a class="data_img">'.$dt.'</a>
        </div><!--cont_data-->
    </div><!--contain_box_data-->
    ';

e ai faça:

<script type="text/javascript">
$(document).ready(function(){
    var $sett = $( "a.sett" );
		
    $sett.fadeOut( "slow", "linear" );

    $sett.find('img').hover(function() {
        var $this = $(this);
        $this.parent('.sett').fadeToggle( "slow", "linear" );
    });
		
})
</script>

[leandro_re9artes 3]

obrigado bruno, ainda não consegui mas é por causa da pouca afinidade com a sintaxe do javascript, vou estudar mais....valew

Brunão entendi...... boa velho!!! peguei como base o conteúdo do seu blog e coloquei em pratica em outra linha de código.... ah muleque! ficou joia.... o negocio é o metodo find() ... abaixo como ficou... abraço. obrigado

<script type="text/javascript">
$(document).ready(function(){                 
             //Ocultar o conteudo no carregamento da página
		$("a.left_link_midia").hide();

             //Exibir o conteúdo quando sobrepor o mouse sobre a div
		$(".data_midia_contain").hover(function(){

	     //Ocultar o conteúdo quando retirar o mouse.
		$(this).find("a.left_link_midia").slideToggle("slow");
		return true;
		});
});
</script>