seleccionar elemento en padre de padre

Tengo un menú de acordeón jQuery Mobile configurado como:

<div class="subCat" data-role="collapsible">
    <h3>Subcategory Name</h3>
    <div class="itemImg">
        <img alt="Item 1" src="[image location]" /><span>Item 1</span>
    </div>
    <div class="itemImg">
        <img alt="Item 1" src="[image location]" /><span>Item 1</span>
    </div>
</div><!--End of subCat-->

Lo cual continúa para varias subcategorías. Tengo un poco de código para obtener "Nombre de subcategoría" cuando se hace clic en la imagen:

var currCat=$(this).closest('.subCat').children('h3').innerHTML;

"esta" es la imagen en la que se hizo clic, y necesito obtener "Nombre de subcategoría" en currCat. Sin embargo, actualmente solo obtengo "indefinido" para el HTML interno y "[objeto OBJETO]" cuando selecciono niños ('h3'). Cualquier ayuda sería apreciada.

preguntado el 03 de mayo de 12 a las 17:05

@thecodeparadox -- "esta" es la imagen en la que se ha hecho clic, como explicó el OP... -

Es curioso que nadie haya publicado esto, pero cuando realiza una selección de jQuery, cada elemento DOM encontrado se almacena como un índice en una matriz. Entonces, si está buscando un solo elemento, puede agregar [0] hasta el final de la selección para seleccionar solo el primer elemento DOM (no el objeto jQuery, sino el elemento DOM real). Tu código funcionará si haces ese simple cambio: var currCat=$(this).closest('.subCat').children('h3')[0].innerHTML; -

Aquí hay un ejemplo de uso .innerHTML con una selección de jQuery: jsfiddle.net/etk9w/1 -

6 Respuestas

Usa .texto():

var currCat=$(this).closest('.subCat').children('h3').text();

También podría usar .html(), cualquiera funcionaría.

contestado el 03 de mayo de 12 a las 17:05

.text() convertirá símbolos como < en entidades HTML como &lt;. .html() no. - Jaspe

@Jasper Eso es incorrecto... .text() ignora html y solo devuelve texto dentro de los nodos html. - kroehre

@Kroehre jsfiddle.net/etk9w. Hay una demostración que muestra lo que quiero decir. Si pasa HTMl al .text() no ignorará el HTML pero lo hará legible en texto sin formato. - Jaspe

@Jasper Eso no es realmente relevante, el uso en la respuesta es .text() sin ningún argumento, que devuelve solo el texto e ignora los nodos html: jsfiddle.net/X3epk pasar una cadena a .text() establece el texto, el operador pregunta sobre la lectura del texto. - kroehre

Prácticamente solo quería que su respuesta se explicara por sí misma en lugar de decir "haz esto, funcionará". Tus comentarios son geniales. - Jaspe

Trata

$('img').click(function(e) {
    var currCat = $(this).closest('.subCat').children('h3').text();
    e.preventDefault();
});

jsviolín: http://jsfiddle.net/zvyjH/

contestado el 03 de mayo de 12 a las 17:05

var currCat=$(this).closest('.subCat').children('h3').html();

contestado el 03 de mayo de 12 a las 17:05

¿Por qué usar esto? ¿Cual es la diferencia? - Jaspe

has probado var currCat=$(this).closest('.subCat').children('h3').html();

contestado el 03 de mayo de 12 a las 17:05

puedes probar:

$('.subCat > h3').text();

or

var currCat=$(this).closest('.subCat > h3').text();

contestado el 03 de mayo de 12 a las 17:05

Una cosa a tener en cuenta con jQuery Mobile es que realizan una buena cantidad de reconstrucción con el HTML después de que se entrega al navegador. El acordeón, por ejemplo, inserta varias capas de span etiquetas dentro del h3. Instalaría FireBug y lo usaría para ver el HTML después de que jQuery Mobile lo haya reconstruido. Además, como han mencionado otras publicaciones, innerHTML es en realidad una propiedad para JavaScript nativo, mientras que jQuery usa .html() y .text().

contestado el 03 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.