55

I have this html code

<div id="mydiv"> <div> <span>Text inside span</span> Text next to span </div> <div> Contents inside the 2nd div element... </div> </div> 

I wanted to get the "Text next to span". I tried this code JQuery code

var a = $('#mydiv div').first().find('span').parent().text(); alert(a); 

The output of the jquery code above is this:

Text inside span Text next to span 

What should be the right thing to do to just get only the "Text next to span"?

4

4 Answers 4

62

var a = $('#mydiv div').first().contents().filter(function() { return this.nodeType == 3; }).text(); console.log(a);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="mydiv"> <div> <span>Text inside span</span> Text next to span </div> <div> Contents inside the 2nd div element... </div> </div>

This gets the contents of the selected div, and filters the matched set, returning only elements with nodeType == 3, which are text nodes.

Sign up to request clarification or add additional context in comments.

Comments

14

I got it by this:

$('#mydiv div').first().contents().eq(1).text(); 

Comments

9

Use this code:

 $('#myDiv') .contents() .filter(function() { return this.nodeType == Node.TEXT_NODE; }).text(); 

2 Comments

It's better to use nodeType == 3 rather than the TEXT_NODE constant, which is not supported by IE.
@James thanks, I was unknown about the integer value of nodeType
0

Use Node.nextSibling

let jqElt_SearchRegion = $('#mydiv div').first(); let jqElt_SearchPoint = jqElt_SearchRegion.find('span'); let node_Sibling = jqElt_SearchPoint[0].nextSibling; // https://developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling console.log(node_Sibling.textContent); // Text next to span. 

(if jQuery is not a strict requirement)

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.