Question

我正在构建Chrome扩展程序（因此只能使用JavaScript），我需要获取h2中heading2类所在的链接。

但是，该类有多个h2个项目（此处未显示），我不知道链接指向的内容，因为它每月都会更改。

在此示例中，标题的内容为“在推文之前思考”。它将始终位于包含“特色主题”字样的另一个标题下。

我希望获得的是/think_before_you_tweet项href=中的h2。它表明我已经完成了h2下面的主题，但情况并非总是如此。

以下是该网站的代码：

<div class="chosen_for_you_section">
   <div class="internal_container">
      <h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <a href="#require_topic" class="fancybox"><i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></a></h2>
      <article class="article_block masonry_item " data-article_id="431">
         <div class="article_image">
            <a href="/think_before_you_tweet"><img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&amp;h=278" /></a>
            <i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
            <div class="action_icons">
               <span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
            </div>
         </div>
         <header>
            <h2 class="heading2"><a href="/think_before_you_tweet">Think Before You Tweet!</a></h2>
            <div class="article_required_complete">Congratulations, you&#039;ve completed this required topic.</div>
            <div class="category_blocks">
               <p>         
                  <a href="/content/category/Social+Media">Social Media</a>              
               </p>
            </div>
         </header>
      </article>
      <div class="focus_items">
         <div class="home_side">
            <p>
               <img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
            </p>
            <p></p>
         </div>
      </div>
   </div>
</div>

我可以在我的扩展程序中使用jQuery，但我没有任何后端功能。

Answer 1

使用jQuery :contains选择器：

$('h2.section_header:contains("Featured Topic") + article a')[0].href

Answer 2

看起来你必须遍历h2.section_header标题，查看文本是否符合你想要的任何内容，然后从标题后面抓取链接。

＆＃13;

$('h2.section_header').each(function(index, element) {
  var $element = $(element);
  if ($element.text().match(/Featured Topic/i)) {
      $('#result').html($element.next('article').find('h2.heading2 a').attr('href'));
  }
});

＆＃13;

#result {
  border: 3px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<div class="chosen_for_you_section">
   <div class="internal_container">
      <h2 class="section_header"><img src="/public/s360/img/360-spinner.png" class="s360LogoHeader">Featured Topic <a href="#require_topic" class="fancybox"><i class="fa fa-info-circle"></i> <span class="infoTxt">Read about what to do</span></a></h2>
      <article class="article_block masonry_item " data-article_id="431">
         <div class="article_image">
            <a href="/think_before_you_tweet"><img src="/thumb/public/media/nh/images/twitter_tweet_think_before_send.png?q=&amp;h=278" /></a>
            <i class="fa fa-check-square-o article_complete article_type_icon" title="Article"></i>
            <div class="action_icons">
               <span class="like "><a title="Favorite"><i class="fa fa-heart"></i></a></span>
            </div>
         </div>
         <header>
            <h2 class="heading2"><a href="/think_before_you_tweet">Think Before You Tweet!</a></h2>
            <div class="article_required_complete">Congratulations, you&#039;ve completed this required topic.</div>
            <div class="category_blocks">
               <p>         
                  <a href="/content/category/Social+Media">Social Media</a>              
               </p>
            </div>
         </header>
      </article>
      <div class="focus_items">
         <div class="home_side">
            <p>
               <img alt="" src="" style="width: 430px; height: 422px;" /><!-- I hid the img src here because it reveals some personal information and is not important -->
            </p>
            <p></p>
         </div>
      </div>
   </div>
</div>

＆＃13;

Answer 3

使用jQuery：包含选择器使用：

jQuery('h2:contains("Featured Topic") ~ article h2.heading2 a').attr('href')

尝试http://jsfiddle.net/ug01a0d2/

没有jQuery尝试绑定到类“section_header”或使用带有textContent检查的循环来迭代所有“h2.section_header”

Answer 4

使用XPath！语法很漂亮，呃，不幸，但它非常强大：

var result = document.evaluate('//h2[@class="section_header"]/following-sibling::article//h2[@class="heading2"]/a', document, null, XPathResult.ANY_TYPE, null );

那应该选择那个锚节点。我不确定它是否可用于扩展，但Chrome定义了一个名为$ x的便捷帮助方法，它消除了查询周围的所有样板。

更多信息：https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

Answer 5

如果有多个H2类标题2：

$('h2[class*="heading2"] a').each(function(){

var href = $(this).attr('href');
// Do what you want with this href

});

从没有id或class的元素中获取数据

5 个答案: