jquery遍历方法 nextUntil() 和 prevUntil()

袁志蒙 207次浏览

摘要:jquery提供了很多遍历数据的方法,常见的方法有:next(), nextAll(), prev(), prevAll(), siblings(),以上的方法无非都是选择紧挨着的兄弟元素、或所有的兄弟元素、今天来说一下这两种方法:nextUntil()和prevUntil(),这两个方法主要是提供了一个范围查找...

jquery提供了很多遍历数据的方法,常见的方法有:next(), nextAll(), prev(), prevAll(), siblings()

以上的方法无非都是选择紧挨着的兄弟元素、或所有的兄弟元素、今天来说一下这两种方法:

nextUntil()和prevUntil()

语法:

$(selector).nextUntil(stop,filter)
$(selector).prevUntil(stop,filter)

这两个方法主要是提供了一个范围查找,返回 selector 与 stop 之间的每个元素之后的所有同级元素,selector不包括被选择器,同级元素是共享相同父元素的元素。

参数:

stop可选。表示在哪里停止搜索元素之后匹配的同级元素的选择器表达式、元素、jQuery 对象。

filter可选。规定缩小搜索介于 selector 与 stop 之间的同级元素范围的选择器表达式。

注意:如需返回多个同级元素,请使用逗号分隔每个表达式。


例一:

查找跟随 <dt id="term-2"> 的同胞元素,直到下一个 <dt>,然后将它们设置为红色背景色。同时,找到跟随 <dt id="term-1"> 的 <dd> 同胞元素,直到 <dt id="term-3">,并为它们设置蓝色文本颜色。

<dl>
  <dt id="term-1">term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>
  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>
  <dt id="term-3">term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>


<script>
  $("#term-2").nextUntil("dt").css("background-color", "red");
  var term3 = document.getElementById("term-3");
  $("#term-1").nextUntil(term3, "dd").css("color", "blue");
</script>


例二:

返回在类名为 "start" 和 "stop" 的两个 <li> 元素之间的所有同级元素

<div style="width:500px;" class="siblings">
  <ul>ul (父节点)  
    <li>li (兄弟节点)</li>
    <li>li (兄弟节点)</li>
    <li class="start">li (类名为"start"的兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li>li (类名为"start"的li节点的下一个兄弟节点)</li>
    <li class="stop">li (类名为"stop"的兄弟节点)</li>
  </ul>   
</div>

<script>
$(document).ready(function(){
$("li.start").nextUntil("li.stop").css({"color":"red","border":"2px solid red"});
});
</script>


在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。

prevUntil方法与nextUntil方法相同,只不过一个是向下查找,一个是向上查找。


随机内容

表情

共1条评论
  • 网友评论:

    好东西

    2020-08-01 12:10:36 回复

    点击加载