javascript - 如何向包含当前 URL 的元素添加类

Question

我有一个全局表，其中包含多个 url，并尝试向与当前网站 url 匹配的类添加一个类，但被卡住了。有谁可以给​​我提示吗？

我已经最接近 jQuery，它适用于文本，但不适用于变量。

<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

:contains() selector仅匹配包含特定文本的元素。要匹配元素属性的值(例如 href )，请使用 Attribute Equals Selector :

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

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

另请参阅其他attribute selectors : contains *= , starts with ^= , not equal !=等

<小时/>

就您的情况而言，我们希望将一个类添加到 <tr>包含 <a> 的元素具有特定的href值。

一种方法是使用 :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>

另一种方法是选择 <a>元素然后 traverse直到适当的<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>