Duda con parentNode y nodos hijos

Dracknes · #1 (**permalink**) 04/11/2012, 10:48

Buenas, estoy liadillo con un problema y a ver si me lo podéis solucionar.

Bueno, al lio.

Tengo esta estructura:

Código:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="jquery.js"></script>
<script type="text/javascript">
	function cambiarText(obj){
		alert(obj.parentNode.id);
		obj.parentNode.innerHTML +="<textarea>Hola</textarea>";
	}
</script>
</head>
<body>
	<div id="articulo">
        <a id='editarLink1' href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p id="prueba1">
            Prueba 
        </p>
    </div>
    <div id="articulo">
        <a id='editarLink1' href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p id="prueba1">
            Prueba 
        </p>
    </div>
    <div id="articulo">
        <a id='editarLink1' href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p id="prueba1">
            Prueba 
        </p>
    </div>
    <div id="articulo">
        <a id='editarLink1' href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p id="prueba1">
            Prueba 
        </p>
    </div> 
</body>
</html>

Bien, lo que trato de conseguir es que al pulsar link coja el texto que hay dentro del parágrafo pero de ese propio DIV. Para ello, estoy tratando de, a través del padre, me de el nodo del hijo y coger el texto de alguna manera y luego usar ese texto creando otro parágrafo en el mismo div.

He probado con Javascript, jQuery y nada. No soy capaz, me podéis echar una mano?

Un saludo.

djaevi · #2 (**permalink**) 04/11/2012, 14:04

Aqui te lo dejo hecho con jquery fijate si es exactamente lo que necesitas

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="jquery.js"></script>
<script type="text/javascript">

Código Javascript:

Ver originalfunction cambiarText(obj){
        $(".dinamico").remove();
        $(obj).parent().prepend("<p class='dinamico'>" + $(obj).next(".prueba").text() + "</p>");
    }

Código HTML:

Ver original</script>
</head>
<body>
    <div id="articulo">
        <a href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p class="prueba">
            Prueba 123 
        </p>
    </div>
    <div id="articulo">
        <a href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p class="prueba">
           Prueba 456 
        </p>
    </div>
    <div id="articulo">
        <a href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p class="prueba">
            Prueba 789 
        </p>
    </div>
    <div id="articulo">
        <a href="#" onClick="javascript:cambiarText(this)">Editar </a>
        <p class="prueba">
            Prueba ABC
        </p>
    </div> 
</body>
</html>

Salu2

IsaBelM · #3 (**permalink**) 04/11/2012, 14:09

usa nextSibling o nextElementSibling que vienen a ser el elemento adyacente

Dracknes · #4 (**permalink**) 04/11/2012, 15:01

Buenas, amos por pasos.

A ver, el código que me ha pasado @djaevi funciona bien, pero si te soy sincero no lo entiendo del todo bien.

Así que si no te importe te voy a ir preguntado un poco el código.

Código:

$(".dinamico").remove();

Esto si, esto es si la clase existe, la remueve, no tiene más xD.

Pero aqui está el lio:

Código:

$("<p class='dinamico'>" + $(obj).next(".prueba").text() + "</p>")
			.insertAfter($(obj));

Es un selector de jQuery, pero no lo llego a entender.

Conseguí hacerlo de esta manera:

Código:

<script type="text/javascript">
	function cambiarText(obj){
		var padre = obj.parentNode;
		padre.id = "cambiado";
		var p = document.getElementById("cambiado").getElementsByTagName("p");
		var text =p[1].innerHTML;
		var myTextArea = document.createElement("textarea");
		myTextArea.innerHTML="<br />" + text;
		padre.replaceChild(myTextArea, p[1]);
	}
</script>

Está puesto el 1 porque es el <p> numero 2.

IsaBelM: Con lo que propones no soy capaz, lo siento :S

Un saludo y muchas gracias a ambos por las respuestas.

djaevi · #5 (**permalink**) 04/11/2012, 18:53

Yo te puse para agregar un parrafo esto

$(obj).prepend("<p class='dinamico'>" + $(obj).next(".prueba").text() + "</p>");

Lo que hago es con prepend insertar el elemento parrafo antes de si mismo osea que da el div con el parrafo dinamico, el link y el parrafo de prueba. No entiendo bien como deberia quedarte que elementos necesitas agregar un textarea o un parrafo?

Salu2!

Dracknes · #6 (**permalink**) 05/11/2012, 00:39

Aaaaaah, vale. Es que borre para probar el $(obj).prepend. Por eso no lo entendía.

Vale, vale, perfecto.

Pues eso es todo.

Muchas gracias, un saludo.