jQuery 使用 .contains() 查找元素并在 .relatives() 中选择偶数行

Question

我有一个关于一起使用 jQuery 选择器来定位孩子的问题

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

• 所以我试图通过使用 .contains() 在其标题中查找一个单词来选择每个面板

• 然后尝试选择所有后续
• 并将偶数行着色为特定颜色，每个面板都不同。
  
  

  到目前为止，我有下面的 jQuery，但没有得到想要的结果......我很确定我需要帮助来选择语句的 .parent().closest() 部分线条？

  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
最新：固定翼陆地飞机（A组）

Answer 1

使用 find 而不是最接近的作品。

.closest 选择器向上遍历 DOM 以找到匹配条件的父级。

.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>