如果 div 包含的 href 包含带有 jquery 的特定字符串，则更改其背景颜色

Question

I'm trying to take a list of hrefs and change the color of one of them if a word in the current url exists in the href. The challenging part is that all of the divs have the same class and can't be changed. Everything I've tried either changes all of them or none of them. Here's the code I have:

<div id="links">
    <div class="box"><a href="example.com/carolina">Link One</a></div>
    <div class="box"><a href="example.com/virgina">Link Two</a></div>
    <div class="box"><a href="example.com/georgia">Link Three</a></div>
</div>


<script type="text/javascript">
    $( document ).ready(function() {
    var pathArray = window.location.pathname.split('/');
    $(".box").each(function(){
        if (window.location.href.indexOf(pathArray[1]) > -1) {
            $(this).css('background', 'red');
        }
    });
});
</script>

Assuming that the current URL is: example.com/virgina/contact.html I would expect the middle div's background to change to red. What am I missing?

Answer 1

You're comparing current URL to the current URL, not the current URL to the link HREF.

Change

if (window.location.href.indexOf(pathArray[1]) > -1) {

to

if ($(this).children('a').attr('href').indexOf(pathArray[1]) > -1) {

Or you could replace the whole each() with just:

$('.box:has(a[href*="'+pathArray[1]+'"]').css('background', 'red');