【实践】js封装jqsiblings方法

前言

在日常开发中，我们可能需要获取某个元素的兄弟节点。但是，jQuery的siblings方法有时候不太满足我们的需求，毕竟它是针对jQuery对象的操作。因此，我们可以考虑使用JavaScript来实现一个更加灵活的兄弟节点获取方法。

实现思路

我们的实现思路是，通过获取当前节点的父节点，然后遍历父节点的所有子节点，从而得到当前节点的兄弟节点。在遍历过程中，我们还需要判断是否剔除当前节点本身。

代码实现

下面是一个实现了以上思路的函数：

function jqsiblings(element, excludeSelf) {
  var siblings = [];
  var siblingsNodes = element.parentNode.children;
  var len = siblingsNodes.length;
  var index = 0;
  for (var i = 0; i < len; i++) {
    if (excludeSelf && siblingsNodes[i] === element) {
      continue;
    }
    siblings[index++] = siblingsNodes[i];
  }
  return siblings;
}

函数接收两个参数：element表示当前节点，excludeSelf表示是否剔除当前节点本身（默认为剔除）。

函数的实现过程非常简单，我们先获取当前节点的父节点，然后遍历父节点的所有子节点，将当前节点的兄弟节点依次存入一个数组中。如果需要剔除当前节点本身，则比对当前节点和遍历到的节点，符合条件的兄弟节点才被存入数组中。最后，返回兄弟节点数组。

使用示例

下面是一个使用示例：

var lis = document.querySelectorAll('#menu li');
lis.forEach(function(li) {
  li.onclick = function() {
    // 获取当前节点的兄弟节点
    var siblings = jqsiblings(this);
    siblings.forEach(function(sibling) {
      // 在控制台上输出兄弟节点的文本内容
      console.log(sibling.textContent);
    });
  };
});

在这个示例中，我们首先通过querySelectorAll方法获取id为menu的ul节点下所有的li节点，然后给每个li节点绑定了一个onclick事件。在事件处理函数中，我们使用jqsiblings函数获取当前li节点的兄弟节点，并在控制台上输出了兄弟节点的文本内容。

结语

封装一个自己的jqsiblings方法并不难，这不仅可以让我们更好地理解JavaScript的相关知识点，还能提升开发效率。当然，对于一个愿意使用jQuery的开发者来说，直接使用jQuery的siblings方法也未尝不可。

阅读剩余 26%