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

Question

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

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

所以我试图通过使用.contains（）

在标题中找到一个单词来选择每个面板

然后尝试选择所有后续＆lt;李＆GT;并为偶数行着色特定颜色，每个面板不同。

到目前为止，我有以下jQuery，但没有得到所需的结果...我很确定我需要帮助我的语句的.parent（）。nearest（）部分来选择行？

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＆amp; SSDR                                                                                                                                      

                                                                                                                                                                                                                         最新消息：固定翼地飞机（A组）                                                                                                                                                                                                                                                                                                                                                                              

Answer 1

使用find代替最近的作品。

.closest选择器遍历DOM以查找与条件匹配的父级。

.find选择器遍历事件发生的DOM，与条件匹配。

＆＃13;

＆＃13;

$(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");
  
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;