jquery 如何找到与选择器匹配的最近的下一个同级？[duplicate]

mnowg1ta 于 2023-01-08 发布在 jQuery

关注(0)|答案(2)|浏览(134)

此问题在此处已有答案：

Cleanest way to get the next sibling in jQuery（3个答案）
2天前关闭。
我有下面的示例结构，其中有一些组具有不同的headerx类，但在group和groupxbottom处具有相同的类，并且在它们之间具有未知数量的<li>。
我得到了特定headerx类的所有头文件：

let headers = $('.header1');

然后我需要隐藏每个组的匹配groupxbottom。
我使用match()匹配groupxbottom的选择器，问题是它匹配所有groupxbottom元素，但我只需要选择1个groupxbottom，它是下一个最接近的兄弟。
假设我已经提取了正确的类名，并且它保存在selector中，那么在迭代头文件时，我如何将它与下一个最接近的同级匹配呢？

headers.each(function() {
   $(this).(.. use selector for next closest sibling only ..).hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<li class="header1 group1">Header1 Group1</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom">Group 1 bottom</li>

<li class="header1 group2">Header1 Group2</li>
<li class="group2"></li>
<li class="group2"></li>
<li class="group2bottom">Group2 bottom</li>

<li class="header2 group1">Header2 Group1</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom">Group1 bottom</li>

jquery

来源：https://stackoverflow.com/questions/75022374/how-to-find-the-closest-next-sibling-that-matches-selector

2条答案

按热度按时间

c0vxltue1#

使用siblings()https://api.jquery.com/siblings/

let headers = $('.header');

headers.each(function() {
   $(this).siblings('.group1bottom').hide();
});

li {
  background-color: lightpink;
  margin-bottom: 5px;
}

.header {
  background-color: lightblue;
}

.group1bottom {
  background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="header group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom"></li>

<li class="header group2"></li>
<li class="group2"></li>
<li class="group2"></li>
<li class="group2bottom"></li>

<li class="header group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom"></li>

赞(0）回复(0）举报 2023-01-08

x6yk4ghg2#

jQuery的nextAll()和attribute selector的一部分可以找到group元素，然后我们只获取集合中的第一个元素。
注意，没有必要使用不同的类名，它们可以是相同的。

$('li.header').each(function() {
  const groupEl = $(this).nextAll('[class*="bottom"]').first();
  console.log($(this).text() + ': ' + groupEl.text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

<li class="header group1">Header 1</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group1bottom">Group 1 bottom</li>

<li class="header group2">Header 2</li>
<li class="group2"></li>
<li class="group2"></li>
<li class="group2bottom">Group 2 bottom</li>

<li class="header group3">Header 3</li>
<li class="group1"></li>
<li class="group1"></li>
<li class="group3bottom">Group 3 bottom</li>

赞(0）回复(0）举报 2023-01-08

我来回答

jquery 如何找到与选择器匹配的最近的下一个同级？[duplicate]

2条答案

相关问题

热门标签

最新问答