Extract tag inner text of sibling/sister tag, using CSS or jquery selectors

Question

0.00/5 (No votes)

See more:

I would like to obtain the value 100 (from the displayed "100 meters" which appears on the webpage below)
from these related/sibling div tags/nodes:

<div class="parameter">
  <div class="parameter-value"> 100 </div>
  <div class="parameter-measure-unit"> meters </div>
</div>

This means:

1. Uniquely identify the 2nd child div with parameter-measure-unit

2. Uniquely identify its sibling / sister div with parameter-value (as the first child div)

3. Extract the text ("100") from this sibling div.

What I have tried:

I'm still researching between CSS and jQuery selectors.
The ::text selector is deprecated.

I would consider XPaths as well.

Posted 25-Jul-21 23:54pm

s_qa

Updated 28-Jul-21 6:37am

Add a Solution

Comments

SeeSharp2 26-Jul-21 10:15am

Here is the list of jquery selectors. There are a lot.

https://api.jquery.com/category/selectors/

s_qa 12-Aug-21 6:35am

Please remove this comment.
Finding documentation is a prerequisite for asking a question.
I've been there on that link.

SeeSharp2 12-Aug-21 7:01am

Well, that link has your answer so why are you asking us for help if you've already seen that link? You have to use a combination of selectors and those are all the available selectors. Pick the right one.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2021-07-28T06:37:00

It's not entirely clear what you're trying to do.

If you're starting from the <div class="parameter-measure-unit"> and want to get the <div class="parameter-value">, all you need to do is:

JavaScript

let $unitDiv = ...;
let $valueDiv = $unitDiv.closest(".parameter").find(".parameter-value");

.closest() | jQuery API Documentation[^]
.find() | jQuery API Documentation[^]

Or alternatively:

JavaScript

let $valueDiv = $unitDiv.prevAll(".parameter-value");

.prevAll() | jQuery API Documentation[^]

If you're starting from the <div class="parameter">, you can get both children with:

JavaScript

let $parameterDiv = ...;
let $valueDiv = $parameterDiv.find(".parameter-value");
let $unitDiv = $parameterDiv.find(".parameter-measure-unit");

Extract tag inner text of sibling/sister tag, using CSS or jquery selectors

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us