选择类名为的div，它们与类名的div相邻

Question

我想要一个xpath或一种直接的方法来选择具有特定类名的js/jquery的类，如果它们有特定的邻居

示例：

<ul>
<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li>
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>
</ul>

所以我想要一个只返回与CCD_ 2样本相邻的CCD_。

我知道，很长的一段路是选择$(".z"(，然后在它们上循环，得到c类的兄弟姐妹，但我想知道是否有一条写的路径；。z"；获取兄弟姐妹。c

Answer 1

您可以在div元素上编写一个click监听器，获取其父元素(即li元素(，然后获取其子元素。这将返回部分中的所有三个div

$('div').click(function() {
let parentLi = $(this).parent();
console.log($(parentLi).children());
console.log($(parentLi).find('div'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li>
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>
</ul>

或者，使用prev()和next()获取单击的div(上一个和下一个元素(的邻居

$('div').click(function() {
console.log($(this).prev());
console.log($(this).next());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li> 
<div class ="z"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>

<li>
<div class ="a"> sample</div>
<div class ="b"> sample</div>
<div class ="c"> sample</div>
</li>
</ul>