9

Could some one give me some guidance on what's the best way to do this.

I'm trying to get all the text which is after ".main"

I know this might be simple, but it's been picking at my brain all day just before Christmas. So i thought instead of stressing myself out, I would look for some guidance.

The example code only brings back the Text in P tag but i'd like to bring back Text not in it's own element and the p tag 

console.log($("#container").find(".main").next().text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="main"> WOOP IN MAIN </div>
  Text not in it's own element
  <p> Text in P tag </p>
</div>

Improve this question
2
  • Is the DOM immutable in this case? Commented Dec 21, 2017 at 15:35
  • Try nextSibling for text after element, instead of nextElementSibling. Commented Jul 31, 2020 at 6:21

2 Answers 2

Reset to default
10

It's because Text not in it's own element is considered a text node, therefore next() will target the <p/> tag, being that it's an HTMLElement. If you were to go native you'd use a combination of nextSibling, which is agnostic of the two node types and nextElementSibling, which as it's method name implies, grabs the next sibling element:

const main = document.querySelector('.main');

const txt = [
  main.nextSibling.textContent.trim(),
  main.nextElementSibling.textContent.trim()
];

console.log(txt)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="main"> WOOP IN MAIN </div>
  Text not in it's own element
  <p> Text in P tag </p>
</div>

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

8 Comments

why are you using const? is this some new fashion to dislike var now?
When using var you run the risk of unintended hoisting and/or reassignment. On top of this Javascript variables are dynamically typed, which can also lead to unintended behavior. It's best practice to use const wherever applicable. No dislike towards var. Just a matter of keeping code at least predictable.
@CarlEdwards how would you then adapt this to remove the text?
@ChrisBeckett What text are you referring to?
@CarlEdwards Text not in it's own element <p> Text in P tag </p>
|
10

The simplest way to achieve this is to clone() the container, remove the .main element from it, then get the text(), like this:

var text = $("#container").clone().find('.main').remove().end().text();
console.log(text.trim());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="main"> WOOP IN MAIN </div>
  Text not in it's own element
  <p> Text in P tag </p>
</div>

You could alternatively recursively traverse through the DOM nodes that follow the .main element, but this is much more complicated and gives the same result.

Improve this answer

5 Comments

You gosh dang beat me to it.'
You genius Rory! :) thank you for helping me out. I was stressing myself out just before Christmas.
Good solution, but be aware that when you have content in the container div BEFORE .main it will be shown too. @Carl Edwards answer doesn't have this constraint
@Archer in that case you'll need to use prevAll() after selecting main and remove those instead.
@BananasSplitter true, but that solution only ever expects there to be 2 following elements. This will work for an infinite number of following sibling elements or nodes. Either will work, it just depends on the exact situation you have.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.