Basta ya de indagar en otras webs porque llegaste al sitio adecuado, contamos con la solución que buscas sin problemas.
Solución:
Para un solo elemento de tramo, debería ser bastante fácil. Simplemente llame a myFunction(this) al hacer clic en el enlace y manipule el DOM de esta manera:
function myFunction(currObj)
var parentofSelected = currObj.parentNode; // gives the parent DIV
var children = parentofSelected.childNodes;
for (var i=0; i < children.length; i++)
if (children[i].tagName = "span")
myValue= children[i].value;
break;
alert(myValue); // just to test
// end function
Espero que esto funcione. ¡Lo hizo por mí!
Desde el no es lo inmediato hermano de eso no podemos invocar .previousSibling o .previousElementSibling. La mejor solución podría ser obtener el padre y consulta por el
document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function()
alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
, false);
Manifestación: http://jsfiddle.net/cEBnD/
Actualización: Soluciones con y sin jQuery
Esta respuesta recibió tantos votos negativos por mostrar un ejemplo con jQuery que decidí agregar más ejemplos con JavaScript estándar para que cualquiera pudiera elegir si usar jQuery o no.
En general, puede utilizar .previousSibling en vainilla JavaScript, consulte:
- https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling
y puedes usar .prev() en jQuery, ver:
- https://api.jquery.com/prev/
Pero tenga en cuenta que es posible que no funcionen en casos más complicados cuando no conoce la estructura exacta de todo su DOM.
Aquí hay algunos ejemplos de cómo lograr ese objetivo tanto usando jQuery como con JavaScript estándar, para casos simples con estructura DOM fija y para casos más complicados usando clases.
sin clases
Para las estructuras DOM más simples, puede salirse con la suya colocando detectores de eventos en todos los enlaces y confiando en el conocimiento implícito del DOM, pero esto puede no funcionar para situaciones más complejas; para eso, vea los ejemplos con clases a continuación.
Con jQuery:
$('a').click(function ()
alert( $(this).prev().text() );
return false;
);
Ver MANIFESTACIÓN.
Sin jQuery:
document.querySelectorAll('a').forEach(link =>
link.addEventListener('click', () =>
alert(link.previousSibling.previousSibling.innerText);
);
);
Tenga en cuenta que el previousSibling tiene que usarse dos veces, porque el nodo de texto vacío que está entre ese tramo y el enlace se usaría de otra manera.
Ver MANIFESTACIÓN.
usando clases
Si el span no es inmediatamente anterior a su a elemento, es posible que también desee hacerlo un poco diferente, agregando también algunas clases para asegurarse de que su código no rompa ningún otro enlace en la página:
Con jQuery:
$('a.link').click(function ()
alert( $(this).parent().find('span.text').text() );
return false;
);
Ver MANIFESTACIÓN.
Sin jQuery:
document.querySelectorAll('a.link').forEach(link =>
link.addEventListener('click', () =>
alert(link.parentNode.querySelector('span.text').innerText);
);
);
Ver MANIFESTACIÓN.
El código anterior vinculará los controladores de clics a cada a elemento con clase "enlace" que alertará un texto contenido por su hermano span elemento con una clase "texto". (Por supuesto, los nombres de las clases deberían ser más descriptivos que eso).
Sección de Reseñas y Valoraciones
Si haces scroll puedes encontrar las explicaciones de otros administradores, tú asimismo tienes la opción de insertar el tuyo si dominas el tema.