Trying to add class to an attribute based on current string in current URL

问题

I've been trying to get this to work all morning, with no luck.

If I do the following code:

    $('.persist-header a').each(function () {
       var $this = $(this);
       if (window.location.href.indexOf('signage') !== -1) {
          $this.addClass('active');
       }
    });

It applies the active2 class to all a href's under .persist-header.

I want it to only apply it to the one URL in the bunch with the term indicated (signage) in it.

I've tried all sorts of combos, but none are achieving the desired effect. This, for instance, returns nothing at all:

    $('.persist-header a').each(function () {
       var $this = $(this);
       if ($this.attr('href').window.location.href.indexOf('signage') > -1) {
          $this.addClass('active');
       }
    });

jQuery is not my strong suit. Any help you can afford will be much appreciated.

Thanks in advance.

EDIT: The first suggestion below worked for me. But the 2nd throws an 'active' state on all of the links. So I'm providing my html below:

    <div class="cblNavMenu--wrap static persist-header ">
       <a class="cblNavMenu--link navBtn max menu-item zero active" href="path/imagetags/library/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Library</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item one active" href="path/imagetags/this_that/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This &amp; That"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">This/That</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item two active" href="path/imagetags/socialmedia/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Social Media"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Social</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item three active" href="path/imagetags/signage/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Signage</span>
          </div>
       </a>

       <a class="cblNavMenu--link navBtn max menu-item four active" href="path/imagetags/properties/" role="button">
          <div class="cblNavMenu--link__content block">
             <div class="cblNavMenu--icon">
                <figure class="cblNavMenu--icon__imgwrap">
                   <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Properties"/>
                </figure>
             </div>
             <span class="cblNavMenu--label">Properties</span>
          </div>
       </a>
    </div>

回答1:

Don't use window.location.href in the second version.

if ($this.attr('href').indexOf('signage') > -1)

You can also put that in the selector and get rid of the loop:

$('.persist-header a[href*=signage]').addClass('active');

.active {
  background-color: pink;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cblNavMenu--wrap static persist-header">
  <a class="cblNavMenu--link navBtn max menu-item zero" href="path/imagetags/library/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Library" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Library</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item one" href="path/imagetags/this_that/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="This &amp; That" />
        </figure>
      </div>
      <span class="cblNavMenu--label">This/That</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item two" href="path/imagetags/socialmedia/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Social Media" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Social</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item three" href="path/imagetags/signage/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Signage" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Signage</span>
    </div>
  </a>

  <a class="cblNavMenu--link navBtn max menu-item four" href="path/imagetags/properties/" role="button">
    <div class="cblNavMenu--link__content block">
      <div class="cblNavMenu--icon">
        <figure class="cblNavMenu--icon__imgwrap">
          <img class="cblNavMenu--icon__img" src="path/image.jpg" alt="Properties" />
        </figure>
      </div>
      <span class="cblNavMenu--label">Properties</span>
    </div>
  </a>
</div>

来源：https://stackoverflow.com/questions/60230203/trying-to-add-class-to-an-attribute-based-on-current-string-in-current-url