jQuery 使用 .contains() 查找元素和 select .relatives() 中的偶数行

Question

我有一个关于使用 jQuery select 或一起针对 child

我有几个面板，其中包含信息但没有特定 ID -

所以我正在尝试 select 每个面板，方法是使用 .contains()
在其标题中找到一个词
然后尝试 select 所有后续

并为偶数行涂上特定颜色，每个面板都不同。

到目前为止，我有以下 jQuery 但没有得到想要的结果......我很确定我需要帮助 .parent().closest() 部分我的声明要select行?

jQuery(".panel-heading:contains('Microlights')").parent().closest(".pbytax-list li:nth-child(even)").css("background-color", "green");

jQuery(".panel-heading:contains('Fixed Wing')").parent().closest(".pbytax-list li:nth-child(even)").css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
 <div class="panel-heading">Latest: Microlights &amp; SSDR&nbsp;
 </div>
  <div class="panel-body widget">        
   <div class="pbytax-intro">
   </div>
    <ul class="pbytax-list">                           
     <li class="pbytax-item">xxx
     </li>                 
     <li class="pbytax-item">yyy 
     </li>                 
     <li class="pbytax-item">zzz
     </li>                 
     <li class="pbytax-item">xxx
     </li>                 
    </ul>
  </div>
</div>

<div class="panel panel-default">
 <div class="panel-heading">Latest: Fixed Wing Land Plane (Group A)&nbsp;
 </div>
  <div class="panel-body widget">        
   <div class="pbytax-intro">
   </div>
    <ul class="pbytax-list">                           
     <li class="pbytax-item">xxx
     </li>                 
     <li class="pbytax-item">yyy 
     </li>                 
     <li class="pbytax-item">zzz
     </li>                 
     <li class="pbytax-item">xxx
     </li>                 
    </ul>
  </div>
</div>

最新：Microlights 和 SSDR

Answer 1

使用查找而不是最近的作品。

.closest选择器向上遍历DOM寻找符合条件的parent

.find 选择器向下遍历符合条件的事件发生的 DOM。

$(document).ready(function() {

  $(".panel-heading:contains('Microlights')").parent().find(".pbytax-list li:nth-child(even)").css("background-color", "green");

$(".panel-heading:contains('Fixed Wing')").parent().find(".pbytax-list li:nth-child(even)").css("background-color", "blue");
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-heading">Latest: Microlights &amp; SSDR&nbsp;
  </div>
  <div class="panel-body widget">
    <div class="pbytax-intro">
    </div>
    <ul class="pbytax-list">
      <li class="pbytax-item">xxx
      </li>
      <li class="pbytax-item">yyy
      </li>
      <li class="pbytax-item">zzz
      </li>
      <li class="pbytax-item">xxx
      </li>
    </ul>
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">Latest: Fixed Wing Land Plane (Group A)&nbsp;
  </div>
  <div class="panel-body widget">
    <div class="pbytax-intro">
    </div>
    <ul class="pbytax-list">
      <li class="pbytax-item">xxx
      </li>
      <li class="pbytax-item">yyy
      </li>
      <li class="pbytax-item">zzz
      </li>
      <li class="pbytax-item">xxx
      </li>
    </ul>
  </div>
</div>

jQuery 使用 .contains() 查找元素和 select .relatives() 中的偶数行

jQuery find element using .contains() and select even lines in .relatives()

css

jquery

jquery-selectors