Как добавить класс к элементу, который содержит текущий 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() соответствует только элементам, которые содержат указанный c текст . Чтобы соответствовать значению атрибута элемента (например, href), используйте Селектор равных атрибутов :

attributeEquals selector
Выбирает элементы, которые иметь указанный атрибут со значением, точно равным определенному значению.

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

Также см. другие селекторы атрибутов : содержит *=, начинается с ^=, не равно !=, et c.

---

В вашем случае мы хотим добавить класс к <tr> элементы, которые содержат <a> с указанным значением c href.

Одним из методов является использование селектора :has() :

имеет селектор
Выбирает элементы, которые содержат хотя бы один элемент, соответствующий указанному селектору.

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>, а затем пройти до соответствующего <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 не оценивается в вашем селекторе, как вы ожидаете; вы на самом деле ищете любую строку таблицы, содержащую текст «url».

Вместо этого, сделайте что-то вроде:

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

В зависимости от ваших данных вам может понадобиться беспокоиться об экранировании, но это должно как минимум начать.