Obtener elemento dentro de un mismo div

xCoNDoR

Hola comunidad, me urge una duda.

Digamos que tengo varios:

<div>
<h1>titulo</h1>
<p>contenido</p>
<button>
</div>

Que metodo podría utilizar para obtener el contenido del h1 (por ejemplo) del div en el que pulso el buttom, teniendo en cuenta que hay muchos divs con la misma estructura?

Gracias de antemano,

EDIT: Con javascript, claro.

Tunnecino

Creo que la duda que me resolvieron puede venirte bien a ti también, http://www.mediavida.com/foro/9/pequena-duda-jquery-identificador-426643

xCoNDoR

Segun veo, con ese metodo buscas a un hijo, osea un elemento actuando desde el div contenedor, en mi caso tengo el elemento hijo, y quiero buscar a su "padre", el div donde se encuentra.

O quizas estoy equivocado..

Gracias por responder :)

dagavi

Tengo pocos conocimientos, así que tal vez se pueda hacer mejor o lo que diga no sea correcto:

¿No puedes modificar el tag div que te interese y ponerle una clase?

<div class="conButton">
    <h1>titulo</h1>
    <p>contenido</p>
    <button>
</div>

Y después coger los elementos de class="conButton"?

1 respuesta
scumah

Con jquery:

$('button').click(function() {
  $(this).siblings('h1').text();
});

con .siblings('h1') buscas en los hermanos del button pulsado los que son h1, y con text sacas el contenido.

1 respuesta
xCoNDoR

#4 Todos tienen el mismo class, por lo tanto no vale :)

#5 Gracias! era eso lo que buscaba!

yoseman

Hola,

Si no quieres usar Jquery tienes varias opciones, una de ellas es usar el arbol de nodos del dom.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

</head>

<body>
<form name="prueba">
	<div><h1>titulo 1</h1><input type="button" onclick="javascript:alert(this.parentNode.childNodes[0].childNodes[0].nodeValue)"></div>
	<div><h1>titulo 2</h1><input type="button" onclick="javascript:alert(this.parentNode.childNodes[0].childNodes[0].nodeValue)"></div>
	<div><h1>titulo 3</h1><input type="button" onclick="javascript:alert(this.parentNode.childNodes[0].childNodes[0].nodeValue)"></div>
</form>
</body>
</html>

No pongas retornos de carro dentro de los divs, porque firefox al acceder a los nodos padre o hijo tiene en cuenta los retornos de carro y los cuenta como un nodo(lo cual es ridículo pero en fin...)

Tb podriás usar id en las H1 junto getelementbyid, pero ya tendrías entonces que ir cambiando los id en cada h1 y cada boton, por eso creo que la otra opción es mejor:

<h1 id="tit1">tituloa1</h1>
<input type="button" onclick="javascript:alert(document.getElementById('tit1').innerHTML)"></div>
	<div>
<h1 id="tit2">tituloa2</h1>
<input type="button" onclick="javascript:alert(document.getElementById('tit2').innerHTML)"></div>

Y todo esto lo digo por si no quieres usar jquery que a mi por ejemplo no me gusta usarlo si no hace falta.

Un saludo.

xCoNDoR

Gracias, está interesante, pero jQuery lo tengo cargado para otras aplicaciones asi que no me importa usarlo si hace bien su trabajo :)

Gracias por la respuesta

Usuarios habituales

  • xCoNDoR
  • yoseman
  • scumah
  • dagavi
  • Tunnecino