jquery源码解析之遍历同胞(上)

最新推荐文章于 2021-06-13 14:53:47 发布

初漾

最新推荐文章于 2021-06-13 14:53:47 发布

阅读量272

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/shuidinaozhongyan/article/details/75581447

版权

Jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

同胞就是拥有相同的父元素。

通过jQuery能够在DOM树中遍历元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。

.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.prevAll() 获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil() 获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。

我们通过下边的代码模拟下这些处理。事实上jQuery也是这样处理的，只是在结构与过滤处理上更加的严谨。

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>
  <!-- <script type="text/javascript" src="../jquery-2.1.1.js"></script> -->
  <title></title>
</head>
<body>

<button id="test1">jQuery遍历同胞</button>
<button id="test2">模拟遍历同胞</button>

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>



<script type="text/javascript">


  function dir(elem, dir, until) {
    var matched = [],
      truncate = until !== undefined;
    while ((elem = elem[dir]) && elem.nodeType !== 9) {
      if (elem.nodeType === 1) {
        if (truncate) {
          if (elem.nodeName.toLowerCase() == until || elem.className == until ) {//细节：元素的className不止一个；
            // 添加过滤id？
            break;
          }
        }
        matched.push(elem);
      }
    }
    return matched;
  }


  function nextAll(elem) {
    return dir(elem, "nextSibling");
  }

  function prevAll(elem) {
    return dir(elem, "previousSibling");
  }

  function nextUntil(elem, until) {
    return dir(elem, "nextSibling", until);
  }

  function prevUntil(elem, until) {
    return dir(elem, "previousSibling", until);
  }


  $("#test1").click(function(){
    var item = $('li.item-ii');
    alert(item.nextAll()[0].className)
    alert(item.prevAll()[0].className)
    alert(item.nextUntil('.end')[0].className)
    alert(item.prevUntil('.first')[0].className)
  })

  $("#test2").click(function(){
    var item = document.querySelectorAll('li.item-ii')[0]
    alert(nextAll(item)[0].className)
    alert(prevAll(item)[0].className)
    alert(nextUntil(item, '.end')[0].className)//.end表示是同胞的最后一个元素？
    alert(prevUntil(item, '.first')[0].className)
  })



</script>

</body>
</html>

初漾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery源码解析之遍历同胞(上)

同胞就是拥有相同的父元素。通过jQuery能够在DOM树中遍历元素的同胞元素。其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。.nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。.nextUntil() 获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。.prevAll() 获得
复制链接

扫一扫

专栏目录