How to add a class to element that contains current URL

Question

I have a global table that will contain several url's and are trying to add a class to the ones that matches the current website url but got stuck. Anyone that could give me a hint?

I've gotten closest with jQuery, it works with text but not with a variable.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
      var url = window.location.href; 
      $("tr:contains(url)").addClass('active');
    });

</script>

HTML

<table id="press" class="press1">
 <thead>
  <tr class="row-1">
    <th class="column-1">day</th>
    <th class="column-2">month</th>
    <th class="column-3">time</th>
    <th class="column-4">place</th>
    <th class="column-5">production</th>
  </tr>
 </thead>
 <tbody class="row-hover">
  <tr class="row-2">
    <td class="column-1">10</td>
    <td class="column-2">oktober</td>
    <td class="column-3">18:00-19:00</td>
    <td class="column-4">place</td>
    <td class="column-5"><a href="http://link.se/production1">production name 1</a></td>
  </tr>
  <tr class="row-3">
    <td class="column-1">11</td>
    <td class="column-2">december</td>
    <td class="column-3">18:00-19:00</td>
    <td class="column-4">place</td>
    <td class="column-5"><a href="http://link.se/production2">production name 2</a></td>
  </tr>
  <tr class="row-3">
    <td class="column-1">22</td>
    <td class="column-2">december</td>
    <td class="column-3">18:00-19:00</td>
    <td class="column-4">place</td>
    <td class="column-5"><a href="http://link.se/production3">production name 3</a></td>
  </tr>
 </tbody>
</table>

Answer 1

The :contains() selector only matches elements that contain specific text . To match the value of an element's attribute (eg href ), use the Attribute Equals Selector :

attributeEquals selector
Selects elements that have the specified attribute with a value exactly equal to a certain value.

 jQuery( "[attribute='value']" )

Also see other attribute selectors : contains *= , starts with ^= , not equal != , etc.

---

In your case, we want to add a class to <tr> elements that contain an <a> with a specific href value.

One method is to use the :has() selector :

has selector
Selects elements which contain at least one element that matches the specified selector.

 jQuery( ":has(selector)" )

 let url = window.location.href; $(function() { $('tr:has(a[href="' + url + '"])').addClass('active'); });

 .active { background-color: lightgreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr><td><a href="https://example.com/">Example</a></td></tr> <tr><td><a href="https://stacksnippets.net/js">This Page</a></td></tr> <tr><td><a href="https://example.com/">Another Example</a></td></tr> </table>

Another method is to select the <a> element and then traverse up to the appropriate <tr> .

 let url = window.location.href; $(function() { $('a[href="' + url + '"]').closest('tr').addClass('active'); });

 .active { background-color: lightgreen; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr><td><a href="https://example.com/">Example</a></td></tr> <tr><td><a href="https://stacksnippets.net/js">This Page</a></td></tr> <tr><td><a href="https://example.com/">Another Example</a></td></tr> </table>

Answer 2

url is not evaluated in your selector as you expect; you're actually looking for any table row containing the text "url".

Instead, do something like:

$("tr:contains(" + url + ")").addClass('active');

Depending on your data you may need to worry about escaping it but this should get you started at least.