如何使用 JQuery 在具有不同元素的列表中获取下一个兄弟匹配项

Question

出于某种原因，我在使用 <li> 和 <div> 获取列表中的下一个匹配项时遇到了问题。我只需要匹配下一个 .infobox，即在 <li> 被点击后匹配的下一个 .infobox。

<ul>
  <li />
  <li />
  <li />
  <div class="infobox" />
  <li />
  <li />
  <li />
  <div class="infobox" />
  ...repeats this pattern a few more times

尝试 1

$('ul li').on('click', function() {
  $(this).nextAll('.infobox').first();
});

有了这个，点击第三个 <li /> 不会 select .infobox

// e.g.
<li />
<li />
<li />
<div class="infobox" />
// clicking on the first <li /> selects the last <li /> and .infobox
// clicking on the second <li /> selects the .infobox correctly
// clicking on the third <li /> does not select .infobox at all

尝试 2

$('ul li').on('click', function() {
  $(this).next('.infobox');
});

有了这个，只点击第三个<li> selects .infobox

// e.g.
<li />
<li />
<li />
<div class="infobox" />
// clicking on the first <li /> does not select .infobox
// clicking on the second <li /> does not select .infobox
// clicking on the third <li /> selects .infobox

尝试 3

$('ul li').on('click', function() {
  $(this).nextUntil('.infobox').next().last();
});

有了这个，点击第三个 <li> 不会 select .infobox

// e.g.
<li />
<li />
<li />
<div class="infobox" />
// clicking on the first <li /> selects .infobox
// clicking on the second <li /> selects .infobox
// clicking on the third <li /> does not select .infobox

Answer 1

更新：

实际上 jQuery 可以更快地做到这一点，在选择器中使用 pseudo class：.nextAll('.infobox:first').

$('li').on('click', function() {
  $(this).nextAll('.infobox:first').addClass('red');
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>not infobox</li>
  <li>not infobox</li>
  <li class="infobox">infobox</li>
  <li>not infobox</li>
  <li>not infobox</li>
  <li>not infobox</li>
  <li class="infobox">infobox</li>
</ul>

您需要遍历 li 数组中保留的项目。

找到 class 后，您需要 break 退出循环，否则将选择所有具有 class 的下一个兄弟姐妹。

$('li').each(function(i) {
  $(this).on('click', function() {
    for(let j = i; j < $('li').length; j++){
      if($('li').eq(j).hasClass('infobox')){
        $('li').eq(j).addClass('red');
        break;
      }
    }
  });
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>not infobox</li>
  <li>not infobox</li>
  <li class="infobox">infobox</li>
  <li>not infobox</li>
  <li>not infobox</li>
  <li>not infobox</li>
  <li class="infobox">infobox</li>
</ul>

如何使用 JQuery 在具有不同元素的列表中获取下一个兄弟匹配项

How to get the next sibling match in a list with different elements using JQuery

jquery

siblings

jquery-selectors