[JQuery] Referenciar el sgte elemento con determinada clase

Finseneu · #1 (**permalink**) 01/01/2013, 05:55

Por ejemplo

Código Javascript:

Ver original$(".mi_link").click(function(event) {
...
}

Como puedo referenciar el primer elemento desde ".mi_link" que tenga como clase: "mi_clase"?

Estaba probando con

Código Javascript:

Ver original$("div").next(".mi_clase")

...pero afecta a todos los divs con esa clase y no solo al primer inmediato

Gracias desde ya y feliz 2013

emprear · #2 (**permalink**) 01/01/2013, 08:17

next() es el equivalent a nextsibling, pero sin ver tu html no se si se corresponde con el elemento que buscás. deberías utilizar
http://api.jquery.com/first/

Saludos

Finseneu · #3 (**permalink**) 01/01/2013, 08:29

Hola

Código HTML:

Ver original<a href="#" class="mi_link">link</a>
<div class="block">bloque 1</div>
 
<a href="#" class="mi_link">link</a>
<div class="block">bloque 2</div>
 
<a href="#" class="mi_link">link</a>
<div class="block">bloque 3</div>

Código Javascript:

Ver original(".block").first().slideToggle()

Con first el problema es que cualquiera de los 3 links que clickee siempre va a actuar sobre el bloque 1, y yo lo que quiero es que cada link afecte el bloque que le sigue.

ryugen · #4 (**permalink**) 01/01/2013, 08:53

Deberías combinar ambos

Código Javascript:

Ver original$("mi_link").next(".block").first();

Sería algo como, buscar los proximos "block" y de ellos dame el primero

emprear · #5 (**permalink**) 01/01/2013, 09:36

Viendo la estructura, en un principio pensé que la solución era la de @ryugen, pero no me funcionó. (un detalle, a la clase mi_link le falta el punto)

Lo pude resolver asi

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('a.mi_link').click(function(event){
var f = this.className.split(' ')[1] ;
//console.log(f);
$("a."+f).next('div.' + f).text('xx');
});
});
 
//]]>
</script>
</head>
<body>
<a href="#" class="mi_link uno">link</a>
<div class="block uno">bloque 1</div>
 
<a href="#" class="mi_link dos">link</a>
<div class="block dos">bloque 2</div>
 
<a href="#" class="mi_link tres">link</a>
<div class="block tres">bloque 3</div>
 
</body>
</html>

Saludos

Finseneu · #6 (**permalink**) 01/01/2013, 09:53

Gracias ryugen

Código Javascript:

Ver original$("mi_link").next(".block").first().slideUp();

No hace nada

De esta forma...

Código Javascript:

Ver original$("div").next(".block").first().slideUp();

....si funciona, pero siempre opera sobre el primer bloque clickeando cualquiera de los 3 enlaces.

Finseneu · #7 (**permalink**) 01/01/2013, 09:55

emprear, lo que busco es lograrlo sin tener que asignar clases unicas a cada link/bloque

emprear · #8 (**permalink**) 01/01/2013, 10:56

Cita:

Iniciado por Finseneu

emprear, lo que busco es lograrlo sin tener que asignar clases unicas a cada link/bloque

Alguna forma de diferenciar los class de los links habría que tener. Se puede hacer buscando el indice de ese elemento dentro del array() de la clase, asi funciona:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index() + next()</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('a.mi_link').click(function(event){
var indice = $("a.mi_link").index(this);
$($('a.mi_link')[indice]).next('.block').text('xx');
});
});
//]]>
</script>
</head>
<body>
<a href="#" class="mi_link">link</a>
<div class="block">bloque 1</div>
<a href="#" class="mi_link">link</a>
<div class="block">bloque 2</div>
<a href="#" class="mi_link">link</a>
<div class="block">bloque 3</div>
</body>
</html>

Saludos

Finseneu · #9 (**permalink**) 01/01/2013, 18:04

Muchas gracias, lo voy a probar.