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

Question

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

我有几个面板，其中包含信息但没有特定 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

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

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