Let's consider following html code:
<p>
Some text followed by <span>a span element</span>
and another text followed by <b>a bold text</b>.
</p>
How can I get the text before the span and b elements using jQuery?
I tried $("span").prev() and $("b").prev() but it did work because the text is not an element. I also tried $("span").parent() but it matched whole paragraph, while I want only a part of it.
Could you advise any solution? Thank you in advance :-)
How about collecting them into an array instead of two calls to $:
var texts = $('span, b').map(function(){
return this.previousSibling.nodeValue
});
texts[0]; // "Some text followed by "
texts[1]; // " and another text followed by "
References:
var c = jQuery('span'); and later c.previousSibling returns null but c.context.previousSibling is ok. Why?
c.context). Use the code in my answer.var textBefore = $('span')[0].previousSibling.nodeValue;
I was looking for a solution to this, and was confused why I needed to map to an array. Context was not working for me. I finally figured out how to write it.
This is the most basic solution. Putting the [0] converts the element to an elementNode, which allows you to call the previousSibling code. There's no need to put it in an array using the map function unless it is more convenient.
I'm afraid you will need to use regular expressions for that. In order to get the text before span element use something like this:
var txt = $('span').parent().html();
var regex = /(.*)<span>/;
txt = txt.match(regex)[1];
Modify the regex to match other parts of the string as well.
I have come up with a following solution:
var c = $("span").context.previousSibling;
alert(c.data);
But I am not sure how safe it is when using different browsers?
.context.