CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-selectors
Ali_bean
Ali_bean

Reputation: 341

JQuery selector for non wrapped text

I'm having trouble figuring out the JQuery selector for the following HTML. I'm trying to find the value that comes after "Type:" and before the final close div.

So far I'm trying:

$("div[itemscope] strong").children().text()

which is no where near.

HTML:

<div itemscope itemtype="http://schema.org/Organization">&nbsp;&nbsp; 
    <a href="http://www.google.com" rel="nofollow">
    <strong>
        <font size="" color="#404040">
            <span itemprop="name">The Yarmouth Inn</span>
        </font>
    </strong></a>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">&nbsp;&nbsp;30 West Street</span>, 
      <span itemprop="addressLocality">Yarmouth</span>, 
      <span itemprop="addressRegion">Kent</span>, 
      <span itemprop="postalCode">PQ10 4TG</span> 
    </div>&nbsp;&nbsp;
    <strong>Type: </strong>Hotel
</div>

I want to access the word Hotel, just what ever the word Hotel is (depending on the type). Any help would be appreciated, thanks!

Upvotes: 0

Views: 62

Answers (3)

akuiper
akuiper

Reputation: 215057

You could try the contents to get all the children of the outer div and then filter based on the NodeType:

console.log(
  $("div[itemscope]").has("a").contents()
  .filter(function() {
    return this.nodeType === 3;
  }).text()
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div itemscope itemtype="http://schema.org/Organization">&nbsp;&nbsp;
  <a href="http://www.google.com" rel="nofollow">
    <strong>
        <font size="" color="#404040">
            <span itemprop="name">The Yarmouth Inn</span>
        </font>
    </strong></a>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">&nbsp;&nbsp;30 West Street</span>,
    <span itemprop="addressLocality">Yarmouth</span>,
    <span itemprop="addressRegion">Kent</span>,
    <span itemprop="postalCode">PQ10 4TG</span>
  </div>&nbsp;&nbsp;
  <strong>Type: </strong>Hotel
</div>

Upvotes: 1

charlietfl
charlietfl

Reputation: 171689

Get to the nextSibling of the last <strong> and take it's textContent

var txt = $("div[itemscope] strong:last")[0].nextSibling.textContent

console.log('type is:', txt)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div itemscope itemtype="http://schema.org/Organization">&nbsp;&nbsp; 
    <a href="http://www.google.com" rel="nofollow">
    <strong>
        <font size="" color="#404040">
            <span itemprop="name">The Yarmouth Inn</span>
        </font>
    </strong></a>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">&nbsp;&nbsp;30 West Street</span>, 
      <span itemprop="addressLocality">Yarmouth</span>, 
      <span itemprop="addressRegion">Kent</span>, 
      <span itemprop="postalCode">PQ10 4TG</span> 
    </div>&nbsp;&nbsp;
    <strong>Type: </strong>Hotel
</div>

Upvotes: 1

Barmar
Barmar

Reputation: 781706

jQuery doesn't have methods to access text that isn't in a specific element, but it can be done in plain Javascript. Remove text after element shows how to remove a text node like this, and similar code should work to return the content.

console.log($("div[itemscope] > strong:last-child").get(0).nextSibling.textContent);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div itemscope itemtype="http://schema.org/Organization">&nbsp;&nbsp; 
    <a href="http://www.google.com" rel="nofollow">
    <strong>
        <font size="" color="#404040">
            <span itemprop="name">The Yarmouth Inn</span>
        </font>
    </strong></a>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">&nbsp;&nbsp;30 West Street</span>, 
      <span itemprop="addressLocality">Yarmouth</span>, 
      <span itemprop="addressRegion">Kent</span>, 
      <span itemprop="postalCode">PQ10 4TG</span> 
    </div>&nbsp;&nbsp;
    <strong>Type: </strong>Hotel
</div>

Upvotes: 1

Related Questions