I have a certain DIV structure with an anchor tag in between somewhere. On click of the link, I need to fetch the value of another span element within the parent div and do something, (say, alert it).
The html is like this :
...
<div id="div1">
...
<span>This is reqd</span>
...
<a href="#">Click Me </a>
...
</div>
...
The entire div is repeated many times in the page.
When I click on the a I want to alert "This is reqd".
Can the HTML be searched like this?
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 !!
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);
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:
and you can use .prev() in jQuery, see:
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.
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.
$('a').click(function () {
alert( $(this).prev().text() );
return false;
});
See DEMO.
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.
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:
$('a.link').click(function () {
alert( $(this).parent().find('span.text').text() );
return false;
});
See DEMO.
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.)
<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
Using jQuery:
$('#innerId').siblings()
