jQuery nextUntil() 方法

jQuery 中的 nextUntil() 方法用於選擇選擇器和停止之間所有後續的同級元素。返回的元素不包括選擇器和停止元素。

同級元素是指與另一個元素共享相同父元素的元素。

注意：如果此方法未指定引數，則將返回所有後續同級元素，這類似於使用nextAll()方法。

語法

以下是 jQuery 中 nextUntil 方法的語法：

$(selector).nextUntil(stop,filter)

引數

此方法接受以下可選引數：

stop（可選）：包含選擇器表示式、DOM 元素或 jQuery 物件的字串，用於指定停止選擇的位置。
filter（可選）：包含選擇器表示式的字串，用於篩選所選元素。

示例 1

在下面的示例中，我們演示了 jQuery nextUntil() 方法的基本用法：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil("p.stop").css("background-color", "yellow");
});
</script>
</head>
<body>
  <p>Paragraph element</p>
  <p class="start">Paragraph element (with class "start")</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
  <p>Paragraph element</p>
</body>
</html>

當我們執行上述程式時，nextUntil() 方法將選擇並返回類名為 'start' 的 p 元素和類名為 'stop' 的 p 元素之間的所有同級元素。

示例 2

在這個示例中，我們篩選了要在兩個指定元素之間選擇和返回的元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil("p.stop", ".one, .two, .three, .four").css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p class="one">Paragraph element</p>
  <p>Paragraph element</p>
  <h2 class="two">Paragraph element</h2>
  <div class="three">Div element</div>
  <p class="four">Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

當我們執行上述程式時，nextUntil() 方法將返回類名為 "one"、"two"、"three" 和 "four" 的所有元素，這些元素是類名為 "start" 和 "stop" 的 p 元素之間的後續同級元素。

示例 3

以下示例使用 DOM 元素而不是選擇器來返回位於兩個指定元素之間的所有同級元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil(document.getElementsByClassName("p.stop")).css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <h2">Paragraph element</h2>
  <div>Div element</div>
  <p>Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

執行上述程式後，nextUntil() 方法將選擇並返回類名為 'start' 的 p 元素和類名為 'stop' 的 p 元素之間的所有後續同級元素。

示例 4

在這個示例中，我們使用 DOM 元素而不是選擇器，並篩選要在兩個指定元素之間返回的元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("p.start").nextUntil(document.getElementsByClassName("p.stop"), ".one, .two, .three, .four").css("background-color", "yellow");
});
</script>
</head>
<body>
  <h1>Heading element</h1>
  <p class="start">Paragraph element (with class "start")</p>
  <p class="one">Paragraph element</p>
  <p>Paragraph element</p>
  <h2 class="two">Paragraph element</h2>
  <div class="three">Div element</div>
  <p class="four">Paragraph element</p>
  <p>Paragraph element</p>
  <p class="stop">Paragraph element (with class "stop")</p>
</body>
</html>

執行上述程式後，nextUntil() 方法將返回類名為 "one"、"two"、"three" 和 "four" 的所有元素，這些元素是類名為 "start" 和 "stop" 的 p 元素之間的後續同級元素。

jquery_ref_traversing.htm

列印頁面