[Resolvido] Selecionar o próximo elemento

[Alex Juchem 0]

Boa noite, to com um probleminha aqui =)

 

vou explicar, trabalho com PHP e CSS, recentemente comecei a me aprofundar mais em jQuery, mas sempre pegando codigos prontos e tals, oque eu quero fazer é o seguinte, em uma certa pagina de um site de um cliente tem uma lista de noticias, essa lista eu faço ela em um while com o php, quando o usuario clica no link da lista abre um popup em jquery, que na verdade não é bem um popup destes comuns, é um estilizado em css, o problema é que junto com o meu while eu tenho que por o meu script js para ele se repertir e trocar o seu ID, caso eu não faço isso ira funcionar apenas o 1º link, e como jQuery veio para você escrever menos e produzir mais eu estou a procura de um geito de não presisar repedir esses script, vou por aqui o codigo da pagina

 

aqui começa minha repetição

 

          <script type="text/javascript">


           jQuery(document).ready(function(){
               jQuery('.abrePopUp_4').click(function(){
                   jQuery('.popUpAtletaDados_4').show();
               });

               jQuery('.popUpAtletaDadosBtnFechar_4').click(function() {
                   jQuery('.popUpAtletaDados_4').hide();
               })
           });
           </script>


       <div id="popUpDestaques" class="popUpAtletaDados_4">
       	<div id="popUpDestaquesBtnFechar" class="popUpAtletaDadosBtnFechar_4"></div>
           <div id="popUpDestaquesMeio">
           	<div id="popUpDestaquesImg"><img src="../img/img_noticia/ea7172306a6ddc0c56440f659148bb78.png" /></div>
               Maecenas consequat dignissim laoreet. Maecenas sed ante nec tortor molestie commodo a at leo. Ut ac laoreet libero. Proin mollis, libero id scelerisque placerat, odio nunc aliquet lectus, ac fringilla augue nulla non sapien.
           </div>
       </div>

           <div id="boxDestaque">
               <div id="boxImg">
                   <img src="../img/img_noticia/ea7172306a6ddc0c56440f659148bb78.png" style="margin:-35%;" />
               </div>
               <div id="boxTexto">
                   Maecenas consequat dignissim laoreet. Maecenas sed ante nec tortor molestie comm
               </div>
               <div id="boxLinkMais" class="abrePopUp_4">veja mais +</div>
           </div>


		<script type="text/javascript">


           jQuery(document).ready(function(){
               jQuery('.abrePopUp_3').click(function(){
                   jQuery('.popUpAtletaDados_3').show();
               });

               jQuery('.popUpAtletaDadosBtnFechar_3').click(function() {
                   jQuery('.popUpAtletaDados_3').hide();
               })
           });
           </script>


       <div id="popUpDestaques" class="popUpAtletaDados_3">
       	<div id="popUpDestaquesBtnFechar" class="popUpAtletaDadosBtnFechar_3"></div>
           <div id="popUpDestaquesMeio">
           	<div id="popUpDestaquesImg"><img src="../img/img_noticia/28bf03d3fad5059c56701a122c971ea5.png" /></div>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum molestie lacus, convallis gravida diam dignissim cursus. Quisque consequat pellentesque adipiscing. Vivamus et odio sem, ut cursus ipsum. Integer lacinia sapien a sem imperdiet a fermentum risus condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
           </div>
       </div>

           <div id="boxDestaque">
               <div id="boxImg">
                   <img src="../img/img_noticia/28bf03d3fad5059c56701a122c971ea5.png" style="margin:-35%;" />
               </div>
               <div id="boxTexto">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum molestie
               </div>
               <div id="boxLinkMais" class="abrePopUp_3">veja mais +</div>
           </div>


		<script type="text/javascript">


           jQuery(document).ready(function(){
               jQuery('.abrePopUp_1').click(function(){
                   jQuery('.popUpAtletaDados_1').show();
               });

               jQuery('.popUpAtletaDadosBtnFechar_1').click(function() {
                   jQuery('.popUpAtletaDados_1').hide();
               })
           });
           </script>


       <div id="popUpDestaques" class="popUpAtletaDados_1">
       	<div id="popUpDestaquesBtnFechar" class="popUpAtletaDadosBtnFechar_1"></div>
           <div id="popUpDestaquesMeio">
           	<div id="popUpDestaquesImg"><img src="../img/img_noticia/5544b9a00d67d93dc5033d927f60ef29.png" /></div>
               Phasellus volutpat tincidunt mauris in molestie. Ut ac orci enim. Nullam quis metus a nunc tempor euismod. Ut sed velit nulla. Phasellus eget tempus dui. Donec auctor interdum diam ut consectetur. Cras vitae tristique eros. Ut tristique suscipit fringilla. Aenean vel ligula in justo vulputate sodales eget sit amet turpis. Etiam sed mi felis, a scelerisque sapien.<br />

           </div>
       </div>

           <div id="boxDestaque">
               <div id="boxImg">
                   <img src="../img/img_noticia/5544b9a00d67d93dc5033d927f60ef29.png" style="margin:-35%;" />
               </div>
               <div id="boxTexto">
                   Phasellus volutpat tincidunt mauris in molestie. Ut ac orci enim. Nullam quis me
               </div>
               <div id="boxLinkMais" class="abrePopUp_1">veja mais +</div>
           </div>

 

Se vocês repararem eu tive que repetir o js para sempre alterar o ID, eu vi um tutorial por ae que você concegue fazer isso com $(this).next()... mas tentei e não funcionou, alguem tem uma ideia de eu fazer isso??? desculpe por qualquer coisa, sou novo no forum, até mais

[Pablo Bom 2]

Segue um exemplo simples :)

axo q faz oq você precisa

 

 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
       <style type="text/css">
		body {padding-top: 60px;}
	</style>
	<script type="text/javascript">
		$(document).ready(function () {
			$('.oculto').hide();
			$('a[class*="abrePopUp"]').click(function(){$('#div_'+this.id).show()});
			$('a[class*="fechaPopUp"]').click(function(){$('#div'+this.id).hide()});
		});
	</script>
</head>
<body>
	<form class="form-horizontal" id="autocompleteForm" name="autocompleteForm" action=""  method="post">
		<div class="control-group">
			<table>
				<tr>
					<td> <a class="abrePopUp" id="1"> confere: </a></td>
					<td><div class="oculto" id="div_1" >aaaaaaaaaaaaaa  ------ ( <a class="fechaPopUp_1" id="_1"> X </a>)</div></td>
				</tr>
				<tr>
					<td> <a class="abrePopUp" id="2";> confere: </a></td>
					<td><div class="oculto" id="div_2" >bbbbbbbbbbbbbbb ------ ( <a class="fechaPopUp_2" id="_2"> X </a>)</div></td>
				</tr>
			</table>
		</div>
	</form>
</body>
</html>

[Alex Juchem 0]

Realmente, era isso que eu queria, muitoooo obrigado! podem fechar o topico