Check if the href attribute of certain a-tags matches the current page URL (with jQuery)?

Question

How can I check if the href attribute of certain a-tags matches the current page URL (with jQuery)? I want to remove all links that lead to the same page. Here is the current state of my code:

HTML:

<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="www.test.de/test.html"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>

jQuery:

$('#faq accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == $(location).attr('href')){
        $(this).preventDefault();
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

It should be addressed all a tags that are located within accordion-bodys (there are several). These should be deactivated first. Then the styling should be adjusted (with .css ()).

It does not work with my current code. What am I doing wrong?

Answer 1

First of your missing a . in $('#faq accordion-body a'), it should be $('#faq .accordion-body a')

Second you can use a_href == window.location.href to see if it match the current page.

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

Demo

$('#faq .accordion-body a').each(function(){
    var a_href = $(this).attr('href');
    if(a_href == window.location.href){
        $(this).click(function(e) {
          e.preventDefault();
        })
        $(this).css({
            'color' : 'black',
            'text-decoration' : 'none'
        });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faq">
  <h2 class="sectionheading">FAQ</h2>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
  <div class="accordion-group">
    <div class="accordion-heading">
      <strong itemprop="name">
       Question 1               
      </strong>
    </div>
    <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer" style="display: none;">
      <p>Answer 1 <a href="https://stacksnippets.net/js"></a></p>                
    </div>
  </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
    <div class="accordion-group">
      <div class="accordion-heading">
        <strong itemprop="name">
          Question 2                
        </strong>
      </div>
      <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
        <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
      </div>
    </div>
  </div>
  <div class="accordion product" itemscope="" itemtype="http://schema.org/Question">
      <div class="accordion-group">
        <div class="accordion-heading">
          <strong itemprop="name">
            Question 3                
          </strong>
        </div>
        <div class="accordion-body schedule" itemprop="suggestedAnswer acceptedAnswer">
          <p>Answer 3 <a href="www.test.de/test.html"></a></p>                
        </div>
      </div>
  </div>
</div>