Get particular text node after an element

I’m trying to grab a particular string, “ (TEXT 1)”, “ (TEXT 2)”, etc. I cannot change the HTML.

When I do this:

$(this).parent().html(); // $(this) is equivalent to $('a.more').

I get:

<a class="more" href="/e1">Event 1</a> (TEXT 1)<br>
<a class="more" href="/e2">Event 2</a> (TEXT 2)<br>
<a class="more" href="/e3">Event 3</a> (TEXT 3)<br>

I’ve already tried this and this.

I can’t seem to get a particular “(TEXT n)”. Ideally I’d like to get a particular “(TEXT n)”. Something along the lines of:

$('a.more').nextText(1); // this would return " (TEXT 2)"

How can I get a particular string with either JavaScript or jQuery?


As your post implies, if you want to create a custom .nextText() method, just access the nodeValue property of the DOM element’s next sibling:

$.fn.nextText = function() { return this.length ? this[0].nextSibling.nodeValue : null;

Then you can use the .eq() method to get the element by its index and use the custom method:

Example Here

var text = $('.more').eq(0).nextText();
console.log(text); // (TEXT 1)

If you want to add a parameter to pass the index of the element you want to retrieve the text from:

Example Here

$.fn.nextText = function(index) { return this.length ? this[index || 0].nextSibling.nodeValue : null;

var text = $('.more').nextText(1);
console.log(text); // (TEXT 2)

If you want to get multiple elements and text nodes until a specific element (as the OP did in the comments), you can use this custom .nextTextUntil() method:

Example Here

$.fn.nextTextUntil = function(until) { var text = '', next;

if (this.length) { next = this[0].nextSibling;

while (next !== null && until && !$(next).is(until)) { text += next.nodeValue || next.textContent; next = next.nextSibling; } }

return text; };



Would return:


Based on the following HTML:

<a class="more" href="/e1">Event 1</a> (TEXT 1 <em>MORE TEXT</em>)