Problema con children() en jQuery. No me funciona y no se cómo hacerlo.

todoalbo · #1 (**permalink**) 21/11/2012, 15:57

Hola, resulta que tengo el siguiente código para un movimiento de un DIV.

La estructura del DIV es
<div>
<a>
<img>
<div id="texto"></div>
</a>
</div>

Donde el primer div tiene position relative y los otros elementos absolute con la imagen de fondo y el div id texto sobre él.

El tema es que tengo un jQuery para mover el ID texto cuando pongo el mouse sobre la caja principal, pero lo que me pasa es que tengo el selector puesto para varios DIV's y resulta que cuando pongo el mouse en UN div, se me mueven los de todos los demás...algo está mal, pero ni idea que será!!

Alguna ayuda??

El código es:

Código:

$('#misa-diaria, #caja-videos').each(function() {
         $(this).hover(
         function() {
         $('a').children('#texto').stop().animate({ 'padding-bottom' : 200 }, 100);
         },
         function() {
         $('a').children('#texto').stop().animate({ 'padding-bottom' : 10 }, 100);
         })
         });

Si ves, cuando pongo el mouse sobre #misa-diaria se me cambia el padding del texto de misa diaria y de caja-videos, y es justamente lo que no quiero!!. Y si le agrego un (this) antes de ('a') no funciona.

Gracias

gebremswar · #2 (**permalink**) 22/11/2012, 10:04

Hola todoalbo, que tal.

Según lo que mencionas, has tener un mismo id repetido mas de una vez, en este caso id="texto". El id no se debe repetir en una pagina, debe ser único.

Prueba con clases, de la siguiente manera.

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@GBreagan</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on('ready', function() {
    $('body').find('.caja').each(function(){
        $(this).hover(function() {
            $(this).find('a').children('.texto').stop().animate({ 'padding-bottom' : 200 }, 100);
        },
        function() {
            $(this).find('a').children('.texto').stop().animate({ 'padding-bottom' : 10 }, 100);
        });
    });
});
</script>
<style>
.caja {background:#FAE078;width:200px}
.texto {background:#EEEEEE}
</style>
</head>
 
<body>
<div class="caja">
    <a>
        <img src="http://static.forosdelweb.com/customavatars/avatar452499_3.gif" height="50" width="50">
        <div class="texto">Este un texto</div>
    </a>
</div>
<div class="caja">
    <a>
        <img src="http://static.forosdelweb.com/customavatars/avatar452499_3.gif" height="50" width="50">
        <div class="texto">Este un texto</div>
    </a>
</div>
</body>
</html>

Aunque en realidad no se mueve el texto (solo se incremente el padding de la caja que lo contiene). El problema de los selectores esta solucionado.

Saludos y coméntanos.

todoalbo · #3 (**permalink**) 22/11/2012, 12:17

Excelente, ahi funciona perfecto.

Muchas gracias!!