El método html en jquery devuelve sólo un elemento

roncco · #1 (**permalink**) 13/08/2012, 05:53

A ver si sé explicarme: Tengo un menú de ayuda. Cada entrada de la ayuda se compone de una cabecera y varios párrafos. La idea es que el usuario sólo vea las cabeceras y cuando hace click sobre una de ellas le aparece el párrafo. Simplificando estoy haciendo algo así:

Código Javascript:

Ver original$('#ayuda').click(function(e){
    
    $('.cuerpoPantalla').load('/include/vista/ayuda.php', function(){
        
        $('.cuerpoPantalla p').hide();
 
        $('.cuerpoPantalla h4').click(function(){
            
               $('.trasCuerpo').hide();
               var textoInsertar = $(this).parent().children('p').html();
               $(this).after('<div class="trasCuerpo"></div>');
               $('.trasCuerpo').text(textoInsertar);
            
        });
    
    });
    
    e.preventDefault();
});

En principio todo funciona como debería: Hago click en el botón ayuda, me aparecen
las entradas y se mantienen ocultos los párrafos, y al hacer click sobre cada entrada se
muestran los párrafos, pero, y ahí viene el problema, sólo aparece el primer párrafo, no los demás. En principio entiendo que con children() estoy seleccionando todos los párrafos, pero parece que no.

¿Alguien puede echarme una mano)

djaevi · #2 (**permalink**) 13/08/2012, 07:10

Hola antes que nada te recomendaria que para hacer desaparecer y aparecer cosas uses slideToggle de jquery, no entiendo porque le pasas a un solo boton el evento ayuda ya que tienes varias cabeceras y entradas no deberia ser para varios links?.

Te dejo un breve ejemplo aver si es algo parecido a lo que necesitas copialo y pegalo en un html vacio (copia la jquery en su raiz con el nombre jquery.js) y fijate lo que hacen los links al clickarlo.

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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Divs</title>
<style>
    .cabecera p {
        display:none;
    }
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

Código Javascript:

Ver original$(document).ready(function() {
        $(".ayuda").bind("click",function(){
            $(this).next().children().slideToggle("slow");
        })
    })

Código HTML:

Ver original</script>
</head>
 
<body>
    <a href="#" class="ayuda"> Ayuda1 </a>
        <div class="cabecera"> Cabecera 1 
            <p> 1 </p>
            <p> 2 </p>
            <p> 3 </p>
        </div>
        <a href="#" class="ayuda"> Ayuda2 </a>
        <div class="cabecera"> Cabecera 2 
            <p> A </p>
            <p> B </p>
            <p> C </p>
        </div>
 
</body>
</html>

Saludos!

roncco · #3 (**permalink**) 13/08/2012, 09:49

Pues tienes toda la razón, la verdad es que me estaba complicando la vida de mala manera.

Funcionó perfecto, mil gracias

dontexplain · #4 (**permalink**) 13/08/2012, 11:11

.children() de facto devuelve todos los nodos hijos o filtrados por el selector indicado, pero al agregarle .html() sólo es capaz de devolver el html() del primer elemento, esto es, sólo es capaz de devolver los elementos no selectivamente las propiedades de todos los elementos devueltos.

Para recoger las propiedades basta con hacer un bucle con todos los elementos devueltos, estos contienen las propiedades inherentes al objeto original.

Esto es aplicable tanto a html() como a val() o text()

nodoshijos = $(elemento).children();
arraydepropiedad = [];
$.each(nodoshijos,function(i,v){
arraydepropiedad[i] = $(v).html();
});

La probable explicación a esto es que las funciones de devolución de nodos como filter, find o children a su vez son capaces de devolver arrays pero funciones como html() o val() no crean en sí mismas arrays sino que devuelven valores aislados. La cuestión está en el funcionamiento del propio método.

Si se mira un poco jQuery.fn.init

[...]
return e.makeArray(a,this)}

Eso retorna un array, funciones como Children sólo filtran y devuelven a este objeto los nodos hijos para devolver crear y retornar un array-

Un saludo.