get nearby sibling in javascript

Since the <span> is not the immediate sibling of that <a>, we can't invoke .previousSibling or .previousElementSibling. Best solution might be to get the parent and query for the <span>

document.getElementById( 'div1' ).getElementsByTagName( 'a' )[ 0 ].addEventListener('click', function() {
    alert( this.parentNode.getElementsByTagName( 'span' )[ 0 ].textContent );
}, false);

Demo: http://jsfiddle.net/cEBnD/


For a single span element, it should be pretty easy,. Just call a myFunction(this) on click of the link and manipulate the DOM like this :

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

Hope this works. It did for me !!


<html>
<body>
    <div id="div1">
        <span>This is required</span>
        <a href="#" onclick="myclick(this.parentNode)">Click Me</a>
    </div>
</body>
<script>
    function myclick(x){
        var y = x.querySelector("span").innerHTML;
        alert(y)
    }
</script>
</html>

insted of span you can also give class name eg., 

<span class="classname">This is required</span>
x.querySelector(".classname").innerHTML

Update: Solutions with and without jQuery

This answer got so many downvotes for showing an example with jQuery that I decided to add more examples with vanilla JavaScript so that anyone could choose whether to use jQuery or not.

Generally, you can use .previousSibling in vanilla JavaScript, see:

  • https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling

and you can use .prev() in jQuery, see:

  • https://api.jquery.com/prev/

But keep in mind that those may not work in more complicated cases when you don't know the exact structure of your entire DOM.

Here are few examples of achieving that goal both using jQuery and with vanilla JavaScript, for simple cases with fixed DOM structure and for more complicated cases using classes.

Without classes

For the most simple DOM structures you might get away with putting event listeners on all links and relying on the implicit knowledge of the DOM, but this may not work for more complex situations - for those see the examples with classes below.

With jQuery:

$('a').click(function () {
  alert( $(this).prev().text() );
  return false;
});

See DEMO.

Without jQuery:

document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.previousSibling.previousSibling.innerText);
  });
});

Note that the previousSibling has to be used twice, because the empty text node that is between tha span and link would be used otherwise.

See DEMO.

Using classes

If the span is not immediately preceding your a element then you may also want to do it a little bit differently, also adding some classes to make sure that your code doesn't break any other links on the page:

With jQuery:

$('a.link').click(function () {
  alert( $(this).parent().find('span.text').text() );
  return false;
});

See DEMO.

Without jQuery:

document.querySelectorAll('a.link').forEach(link => {
  link.addEventListener('click', () => {
    alert(link.parentNode.querySelector('span.text').innerText);
  });
});

See DEMO.

The above code will bind click handlers to every a element with class "link" which will alert a text contained by its sibling span element with a class "text". (Of course the class names should be more descriptive than that.)

Tags:

Javascript

Dom

Siblings

Recent Posts