jQuery的遍历结构设计之遍历同胞

人心

2019-07-01

关注关注

jQuery的遍历结构设计之遍历同胞

前言：光看不行，需要动手操作！

一、本文实现的 jQuery 的同胞接口及作用如下

接口：$(selector).nextAll()
作用：向后遍历同胞，返回 selector 之后的所有同级元素

接口：$(selector).prevAll()
作用：向前遍历同胞，返回 selector 之前的所有同级元素

接口：$(selector).nextUntil(otherSelector)
作用： 向后遍历同胞，返回在 selector 和 otherSelector 之间的所有同级元素

接口：$(selector).prevUntil(otherSelector)
作用： 向前遍历同胞，返回在 otherSelector 和 selector 之间的所有同级元素

接口：$(selector).next()
作用： 返回 selector 的后一个同级元素

接口：$(selector).prev()
作用：返回 selector 的前一个同级元素

接口：$(selector).siblings()
作用：返回 selector 的所有同胞元素（共享一个父元素，且不包括自己）

将这些接口封装在 jQuery 的迭代器中 ↓

二、迭代器
迭代器可以理解为一个遍历方法，
该方法的第一个参数是一个 object，该对象的每个属性都是一个 function；
该方法的第二个参数是一个 callback，该回调函数能够按顺序处理 object 的每个 function，并且不暴露 object 的内部。

jQuery 遍历同胞的迭代器代码：

let ajQuery = {}

  jQuery.each({
      // nextAll() 方法返回被选元素之后的所有同级元素
      // 同级元素是共享相同父元素的元素
      //详细请看：http://www.runoob.com/jquery/traversing-nextall.html

      //nextAll的本质即利用 elem.nextSibling，抓取element节点，向后递归直到elem=null
      nextAll:function (elem) {
          return dir(elem, "nextSibling")
      },
      //prevAll() 方法返回被选元素之前的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-prevall.html

      //prevAll的本质即利用 elem.previousSibling，抓取element节点，向前递归直到elem=null
      prevAll:function (elem) {
        return dir(elem, "previousSibling")
      },

      //返回在类名为 "item-1" 和 "item-4" 的两个 <li> 元素之间的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-nextuntil.html

      //nextUntil的本质即利用 elem.nextSibling，抓取element节点，
      //向后递归直到elem.nodeName.toLowerCase()===until||elem.className === until
      nextUntil:function (elem, until) {
        return dir(elem, "nextSibling", until)
      },
      //返回在类名为 "item-4" 和 "item-1" 的两个 <li> 元素之间的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-prevuntil.html

      //prevUntil的本质即利用 elem.previousSibling，抓取element节点，
      //向前递归直到elem.nodeName.toLowerCase()===until||elem.className === until
      prevUntil: function (elem, until) {
        return dir(elem, "previousSibling", until)
      },
      //next:返回被选元素的 后一个同级元素
      next: function (elem) {
        return sibling(elem, "nextSibling");
      },
      //prev:返回被选元素的 前一个同级元素
      prev: function (elem) {
        return sibling(elem, "previousSibling");
      },
      //siblings:返回被选元素的 所有同胞元素（共享一个父元素，且不包括自己）
      siblings: function (elem) {
        return dir(elem, "siblings")
      }
    },

    function(key, value) {
      ajQuery[key] = function(elem, until) {
        return  value(elem, until);
      }
    })

三、使用 dir() 和 sibling() 方法来封装遍历同胞的方法

dir() 封装除 $().next() 和 $().pre() 以外的遍历同胞的方法：

function dir(elem, dir, until) {
    let matched = []
    //是否有另一目标节点
    let hasUntil = until !== undefined

    let sibElem
    let isSibling=false
    //$().siblings()的实现有两种方法
    //第一种是先 prevAll 向前遍历目标元素的同胞元素，再 nextAll向后遍历目标元素的同胞元素
    //第二种是先找到父元素的第一个元素，再 nextAll向后遍历同胞元素，最后将 目标元素从数组中去掉

    //这里采用的是第二种方式
    if(dir==='siblings'){
      sibElem=elem
      isSibling=true
      elem=elem.parentNode.firstElementChild
      dir='nextSibling'
      matched.push(elem)
    }

    //nextAll:一直nextSibling，直到elem=null，退出循环
    while ((elem = elem[dir])&&elem.nodeType !== 9) {
      if (elem.nodeType === 1) {
        //nextUntil:true
        if (hasUntil) {
          console.log(elem.nodeName.toLowerCase(),elem.className,'className44')
          if (elem.nodeName.toLowerCase() === until || elem.className === until) {
            console.log(until,'until46')
            break
          }
        }
        console.log(elem,'elem50')
        matched.push(elem)
      }
    }
    //循环完后，去除目标元素
    if(isSibling){
      console.log(sibElem,matched.indexOf(sibElem),'sibElem66')
      matched.splice(matched.indexOf(sibElem),1)
    }

    return matched
  }

sibling() 封装 $().next() 和 $().pre() 方法：

function sibling(elem, dir) {
    //过滤掉不是element类型的元素
    while ((elem = elem[dir]) && elem.nodeType !== 1) { }
    return elem
  }

四、完整代码及实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery的遍历结构设计之遍历同胞</title>

</head>
<body>
<script src="jQuery.js"></script>

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

<button id="test2">jQuery遍历同胞</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>
          <li class="item-4">4</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) {
    let matched = []

    let truncate = until !== undefined

    let sibElem
    let isSibling=false
    //遍历同胞元素有两种方法
    //第一种是先 prevAll 向前遍历目标元素的同胞元素，再 nextAll向后遍历目标元素的同胞元素
    //第二种是先找到父元素的第一个元素，再 nextAll向后遍历同胞元素，最后将 目标元素从数组中去掉

    //这里采用的是第二种方式
    if(dir==='siblings'){
      sibElem=elem
      isSibling=true
      elem=elem.parentNode.firstElementChild
      dir='nextSibling'
      matched.push(elem)
    }

    //nextAll:一直nextSibling，直到elem=null，退出循环
    while ((elem = elem[dir])&&elem.nodeType !== 9) {
      if (elem.nodeType === 1) {
        //nextUntil:true
        if (truncate) {
          console.log(elem.nodeName.toLowerCase(),elem.className,'className44')
          if (elem.nodeName.toLowerCase() === until || elem.className === until) {
            console.log(until,'until46')
            break
          }
        }
        console.log(elem,'elem50')
        matched.push(elem)
      }
    }
    //循环完后，去除目标元素
    if(isSibling){
      console.log(sibElem,matched.indexOf(sibElem),'sibElem66')
      matched.splice(matched.indexOf(sibElem),1)
    }

    return matched
  }

  function sibling(elem, dir) {
    //过滤掉不是element类型的元素
    while ((elem = elem[dir]) && elem.nodeType !== 1) { }
    return elem
  }

  let ajQuery = {}

  jQuery.each({
      // nextAll() 方法返回被选元素之后的所有同级元素
      // 同级元素是共享相同父元素的元素
      //详细请看：http://www.runoob.com/jquery/traversing-nextall.html

      //nextAll的本质即利用 elem.nextSibling，抓取element节点，向后递归直到elem=null
      nextAll:function (elem) {
          return dir(elem, "nextSibling")
      },
      //prevAll() 方法返回被选元素之前的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-prevall.html

      //prevAll的本质即利用 elem.previousSibling，抓取element节点，向前递归直到elem=null
      prevAll:function (elem) {
        return dir(elem, "previousSibling")
      },

      //返回在类名为 "item-1" 和 "item-4" 的两个 <li> 元素之间的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-nextuntil.html

      //nextUntil的本质即利用 elem.nextSibling，抓取element节点，
      //向后递归直到elem.nodeName.toLowerCase()===until||elem.className === until
      nextUntil:function (elem, until) {
        return dir(elem, "nextSibling", until)
      },
      //返回在类名为 "item-4" 和 "item-1" 的两个 <li> 元素之间的所有同级元素
      //详细请看：http://www.runoob.com/jquery/traversing-prevuntil.html

      //prevUntil的本质即利用 elem.previousSibling，抓取element节点，
      //向前递归直到elem.nodeName.toLowerCase()===until||elem.className === until
      prevUntil: function (elem, until) {
        return dir(elem, "previousSibling", until)
      },
      //next:返回被选元素的 后一个同级元素
      next: function (elem) {
        return sibling(elem, "nextSibling");
      },
      //prev:返回被选元素的 前一个同级元素
      prev: function (elem) {
        return sibling(elem, "previousSibling");
      },
      //siblings:返回被选元素的 所有同胞元素（共享一个父元素，且不包括自己）
      siblings: function (elem) {
        return dir(elem, "siblings")
      }
    },

    function(key, value) {
      ajQuery[key] = function(elem, until) {
        return  value(elem, until);
      }
    })

  $("#test1").click(function(){
    // let item = document.querySelectorAll('li.item-ii')[0]
    // let item = document.querySelectorAll('li.item-1')[0]
    let item = document.querySelectorAll('li.item-2')[0]
    //#text 3
    //nodeType=3，而不是1，所以不符合要求
    // console.log(item.nextSibling,item.nextSibling.nodeType)
    // console.log(item.nextSibling.nextSibling,item.nextSibling.nextSibling.nodeType)
    // console.log(item.nextSibling.nextSibling.nextSibling,item.nextSibling.nextSibling.nextSibling.nodeType)
    // //null
    // console.log(item.nextSibling.nextSibling.nextSibling.nextSibling)
    // console.log(ajQuery.nextAll(item))
    // console.log(ajQuery.nextAll(item)[0].className)
    // console.log(ajQuery.prevAll(item)[0].className)
    // console.log(ajQuery.nextUntil(item, 'item-4'),'item107')
    // console.log(ajQuery.nextUntil(item, 'item-4')[0].className,'item108')
    // console.log(ajQuery.prevUntil(item, 'item-2')[0].className)
    //
    // console.log(prev(item))
    // console.log(next(item))

    // Siblings item.parentNode.firstElementChild
    console.log(ajQuery.siblings(item,'siblings'),'siblings151')

  })

  $("#test2").click(function(){
    let $item = $('li.item-2')
    console.log($item.nextAll()[0].className)
    console.log($item.prevAll()[0].className)
    console.log($item.nextUntil('item-4'))
    console.log($item.nextUntil('item-4')[0].className)
    console.log($item.prevUntil('item-2')[0].className)

    console.log($item.prev())
    console.log($item.next())
  })

</script>
</body>
</html>

五、总结
注： element 表示 jQuery对象selector 的原生 DOM 节点

接口：$(selector).nextAll()
本质： 利用 element=element.nextSibling，抓取 element 的同胞节点，并向后递归直到 element=null，此时返回 selector 向后遍历的所有同胞节点

接口：$(selector).prevAll()
本质： 利用 element=element.previousSibling，抓取 element 的同胞节点，并向前递归直到 element=null，此时返回 selector 向前遍历的所有同胞节点

接口：$(selector).nextUntil(otherSelector)
本质： 利用 element=element.nextSibling，抓取 element 的同胞节点，并向后递归直到 elem.nodeName.toLowerCase()===otherSelector || elem.className === otherSelector，此时返回 selector 向后遍历到 otherSelector 之间的所有同胞节点

接口：$(selector).prevUntil(otherSelector)
本质： 利用 element=element.previousSibling，抓取 element 的同胞节点，并向前递归直到 elem.nodeName.toLowerCase()===otherSelector || elem.className === otherSelector，此时返回 selector 向前遍历到 otherSelector 之间的所有同胞节点

接口：$(selector).next()
本质： 利用 element=element.nextSibling 和 elem.nodeType !== 1，过滤并抓取 元素类型 的后一个同胞节点

接口：$(selector).prev()
本质： 利用 element=element.previousSibling 和 elem.nodeType !== 1，过滤并抓取 元素类型 的前一个同胞节点

接口：$(selector).siblings()
本质： 先找到父元素的第一个元素，再 nextAll() 向后遍历同胞元素，最后将 selector 从数组中去掉

jQuery的遍历结构设计之遍历同胞

（完）

jquery 遍历

安科网

jQuery的遍历结构设计之遍历同胞

人心

人心

相关推荐

jquery隐式迭代（遍历内部dom元素） jquery设置样式方法

jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

详解Vue数据驱动原理

JavaScript枚举选择jquery插件代码实例

7个 jQuery上手项目，Github超千人star

jQuery实现带进度条的轮播图

jQuery实现鼠标拖拽登录框移动效果

jquery实现简易验证插件封装

jQuery实现朋友圈查看图片

jQuery实现日历效果

jQuery中event.target和this的区别详解

9.jQuery初识—选择器、效果

Kendo UI for jQuery数据管理使用教程：PDF导出（二）

JQuery 06 属性

取代Jquery，用Vue 构建Bootstrap 4 应用

隐式迭代---ES5的数组方法以及jQuery的方法调用

jQuery Ajax 操作函数汇总

jQuery validate验证表单隐藏域

asp.net 利用Ajax和Jquery在前台向后台传参数并返回值

Ant-design中使用jQuery

人心