非包装文本的 JQuery 选择器

Question

我无法确定以下 HTML 的 JQuery 选择器。我试图找到“类型：”之后和最终关闭 div 之前的值。

到目前为止，我正在尝试：

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

这是不近的地方。

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>

我想访问“Hotel”这个词，就像“Hotel”这个词一样（取决于类型）。任何帮助将不胜感激，谢谢！

Answer 1

jQuery 没有方法来访问不在特定元素中的文本，但它可以在纯 Javascript 中完成。 Remove text after element 展示了如何像这样删除文本节点，类似的代码应该可以返回内容。

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>

Answer 2

获取最后一个<strong> 的nextSibling 并将其作为文本内容

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>

Answer 3

您可以尝试使用contents 来获取外部div 的所有孩子，然后根据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>