Pulling Poorly Defined Span Values from Page

[scottsweeney]

I have multiple lines of values I must pull from a page but they all sit under the same DIV, all have the same CLASS, all with two areas of text. I need to be able to define each rows values independently.

Example:

<div class="c-job-result__specs-list career-details-content-bottom">
   <div class="c-job-result__specs-item"> Character Name <span> DONALD DUCK </span> </div>
   <div class="c-job-result__specs-item"> Location <span> Mars </span> </div>
   <div class="c-job-result__specs-item"> City <span> Paris </span> </div>
   <div class="c-job-result__specs-item"> Company/Cartoon Name <span> SOME NAME </span> </div>
   <div class="c-job-result__specs-item"> Main Area <span> CARTOON CHARACTER </span> </div>
   <div class="c-job-result__specs-item"> Job Name <span> Full Time </span> </div>
   <div class="c-job-result__specs-item"> Cartoon Type Type <span> Old </span> </div>
</div>

Pulling it via 'jQuery(this).children('span.').text();' results in everything being dumped. 

How does one define each dimension (City) and capture its value (Paris)?

[BenStephenson]

Hi @scottsweeney 

You can either use the :contains pseudo selector, or you can index by row number.

These three will all return the full element containing City:

$("div.career-details-content-bottom > div.c-job-result__specs-item:contains('City')")

$("div.career-details-content-bottom > div.c-job-result__specs-item:nth-child(2)")

$("div.career-details-content-bottom > div.c-job-result__specs-item").eq(2)

Once you've got that you can use .text() to get the full contents (without the markup), and  .find("span") to get the value out.

To get the dimension title without the value is a bit harder, you'll probably have to do a .text() and then use some JS text manipulation or Regex to read up to the first open angle bracket of the opening span tag.

Possibly something like (I haven't tested this code, it's just from the top of my head):

var element = $("div.career-details-content-bottom > div.c-job-result__specs-item:contains('City')");
var value = element.find("span").text();
var dimensionName = element.text().substring(0, element.text().indexOf("<"));

Hope that helps.