如何使用 jquery 定位容器内最近的 class？

Question

我想定位最近的 class 并停止定位其他 class 元素（如果它是该部分要读取的最后一项）。这就是我想要实现的目标。

.is-child class 将在单击 .parent class 时显示，并且只会显示最近的 class。我已经尝试使用 .next() 方法，但每次点击只会显示 1 .is-child 个元素

这是我的代码：

    jQuery('li.current.parent').click(function(){
         jQuery(this).next('.is-child').css('display', 'block');
    });

我也试过使用 .nextAll 但它会显示所有 .is-child 元素。

    jQuery('li.current.parent').click(function(){
         jQuery('.is-child').nextAll('.is-child').css('display', 'block');
    });

Answer 1

您需要 select 使用 .nextUntil 的元素 - 这将 select 从 $(this) 到指定的 select 或（不包括$(this) AND 与 select 或匹配的元素：

$(function() {
  jQuery('li.current.parent').click(function(){
    jQuery(this).nextUntil('.parent').css('background-color', 'red');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="current parent">click here</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="is-child">hi</li>
  <li class="parent">bye</li>
</ul>

如何使用 jquery 定位容器内最近的 class？

How to target nearest class within a container using jquery?

jquery

nextuntil