Блог

Главная - Вопросы по программированию - Элемент Select имеет двух определенных дочерних элементов с использованием jQuery

Элемент Select имеет двух определенных дочерних элементов с использованием jQuery

#javascript #jquery #html #jquery-selectors

#javascript #jquery #HTML #jquery-селекторы

Вопрос:

Я хочу выбрать родительский элемент путем сопоставления двух дочерних элементов. Мой код:

 $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)");  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>

Однако при этом будет выбрано время как для Тома, так и для Джека.

Ответ №1:

Вам нужно выбрать a тег, а затем использовать :has() селектор для фильтрации элемента с конкретными дочерними элементами.

 $('a:has(span:contains("11:00am")):has(span.name:contains("Tom"))')
  

 $('a:has(span:contains("11:00am")):has(span.name:contains("Tom"))').css("background-color","rgb(255, 255, 255)");  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>
<a style="background-color: rgb(0, 0, 0);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>

Комментарии:

1. : селектор has () — это то, что я ищу, спасибо, работает как шарм.

Ответ №2:

 $('span:contains("11:00am"),span:contains("Jack")').parent("a").css("background-color", "Grey");
$('span:contains("11:00am"),span:contains("Tom")').parent("a").css("background-color", "Green");  
 <a style="background-color: rgb(255, 255, 255);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Tom</span>
</a>

<a style="background-color: rgb(255, 255, 255);">
  <div class="time">
    <span>11:00am</span>
  </div>
  <span class="name">Jack</span>
</a>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

Комментарии:

1. @Mohammad спасибо, что ваш ответ тоже увеличил мои знания 🙂