1

I am building a Chrome extension (and therefore can only use JavaScript) and I need to get the link that resides in the h2 with the heading2 class.

However, there are multiple h2 items with that class (not shown here), and I will not know what the link will point to, as it changes monthly.

In this example, the content of the header is "Think before you tweet". It will always be under another header that contains the words "Featured Topic."

What I am looking to get is the /think_before_you_tweet from the href= of that h2 item. It shows that I have already completed the topic underneath the h2, but that will not always be the case.

Here is the code for the website:

<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>

I can use jQuery in my extension, but I do not have any back-end capabilities.

Sungguk Lim
  • 6,109
  • 7
  • 43
  • 63
Zach P
  • 560
  • 10
  • 30
  • You should be able to use jQuery's regular selectors to get that, take a look here: http://stackoverflow.com/questions/303956/select-a-which-href-ends-with-some-string – Adam Benzan Dec 07 '15 at 22:33
  • Alberto, That's the problem, I do not know what the content inside of the h2 will be because it changes all the time. – Zach P Dec 07 '15 at 22:34
  • The `.article_required_complete` will not always be there, but how would I be able to get the previous element because that could lead to a solution. – Zach P Dec 07 '15 at 22:35
  • Adam, I do not know what the link will point to, as it changes every month. – Zach P Dec 07 '15 at 22:36
  • I know that the title "Featured Topic" will always be there. Looking at it, the element that contains the same link that is directly under the title and wraps the image will always be there and is the same as the link as the one I am looking for, so I could take the `href` from that element. – Zach P Dec 07 '15 at 22:38
  • I'm thinking I could get the title element or the article element and then find the link from within that somehow. – Zach P Dec 07 '15 at 22:40

5 Answers5

1

Use jQuery :contains selector:

$('h2.section_header:contains("Featured Topic") + article a')[0].href
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
1

Looks like you've gotta loop through the h2.section_header headers, see if the text matches whatever you want, and then grabs the link from the header following itself.

$('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'));
  }
});
#result {
  border: 3px solid red;
}
<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>
jperezov
  • 3,041
  • 1
  • 20
  • 36
1

with jQuery's :contains selector use this:

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

try at http://jsfiddle.net/ug01a0d2/

without jQuery try to bind to class "section_header" or use a cycle with the textContent check to iterate all "h2.section_header"

sherdim
  • 1,159
  • 8
  • 19
0

Use XPath! The syntax is pretty, uh, unfortunate, but it's very powerful:

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

That should select that anchor node. I'm not sure if it's available to extensions, but Chrome defines a handy helper method called $x that eliminates all that boilerplate around the query.

More information: https://developer.mozilla.org/en-US/docs/Introduction_to_using_XPath_in_JavaScript

dtanders
  • 1,835
  • 11
  • 13
  • Unfortunately, I stated that the link will change, so it will not always be "/think_before_you_tweet" – Zach P Dec 07 '15 at 22:40
0

If there are multiple H2 class heading2 :

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

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

});
Dux
  • 309
  • 1
  • 5