Jquery 美元.preval（[selector]）和美元.nextAll（[selector]）是如何工作的？

正如标题所说，我正试图找出jQuery的

.prevAll（）

和

.nextAll（）

背后的逻辑（并在纯JS中复制）。查看源代码并没有像我希望的那样有帮助

请务必记住，prevNodes也可以嵌套在其他元素中。所以这不是选择兄弟姐妹的问题

以下是我到目前为止的想法：

// args should be two selectors, source node and previous nodes
const prevAll = (...args) => {
  // select all the nodes that matches the two selectors
  let elements = document.querySelectorAll(args.join(', '));
  elements = Array.from(elements);

  // get index of the source node inside all elements
  const index = elements.indexOf(document.querySelector(args[0]));

  // return everything before that index
  if (index >= 0)
    return elements.slice(0, index);

  return [];
}

const prevNodes = prevAll('.start-node', '.prev-node')

测试

//参数应该是两个选择器，源节点和前一个节点
const prevAll=（…args）=>{
//选择与两个选择器匹配的所有节点
让elements=document.querySelectorAll（args.join（'，'）；
元素=数组。从（元素）；
//获取所有元素中源节点的索引
const index=elements.indexOf（document.querySelector（args[0]）；
//返回索引之前的所有内容
如果（索引>=0）
返回元素。切片（0，索引）；
返回[]；
}
const prevNodes=prevAll（'.start node'，'.prev node'）
console.log（prevNodes）

---

在纯JS中，我能想到的复制prevAll函数的唯一方法是通过选择器查找当前元素，选择该元素的第一个父元素，并通过子元素循环，只拉取与所选元素具有相同节点名的子节点

示例（这非常粗糙，不符合您对多个参数的需要，如果您有一个具有多个结果的选择器，您也会遇到麻烦）：

函数prevAll（选择器）{
元素=document.querySelector（选择器）；
var nodeType=elements.nodeName；
var totalElements=elements.parentElement.childNodes；
var re=[]；
对于（i=0；i

最大的问题是jQuery可以处理元素的数组返回，并且可以成功地将方法应用于该数组，JS主要是属性，不支持元素数组来调整属性。

这只是

prevAll（）

，但应该很清楚该怎么做（

.nextElementSibling

）：）

let prevAll=（选择器，restrictionSelector=”“）=>{
让elements=Array.from（document.querySelectorAll（selector）），
restrictedElements=restrictionSelector？数组.from（document.querySelectorAll（restrictionSelector））：[]，
结果=[]；
elements.forEach（（element）=>{
让PreviousElement=element.previousElementSibling；
while（prev元素）{
if（restrictedElements.length==0 | | restrictedElements.some（（r）=>r==preveElement））{
结果：推送（前置元素）；
}
prevElement=prevElement.previousElementSibling；
}
});
返回结果；
}
let test=prevAll（“div.start-node”）；
控制台日志（测试）；
test=prevAll（“div.start-node”、“div.wrapper”）；
控制台日志（测试）
我最近也有同样的要求，在不使用jQuery的情况下使用prevAll和nextAll。
我就是这样做的：

function prevAll(element, result) {
  if(element.previousElementSibling){
    result.push(element.previousElementSibling);
    element=element.previousElementSibling;
    prevAll(element, result);
  }
  return result;
}

function nextAll(element, result) {
  if(element.nextElementSibling{
    result.push(element.nextElementSibling);
    element=element.nextElementSibling;
    nextAll(element,result);
  }
  return result;
}

电话：

    var element=document.querySelector('.class-name');//element has to be any dom element
    Array.prototype.forEach.call(prevAll(element, []), function (el) {
        //Do what you need to do with the previous elements here
    });
    Array.prototype.forEach.call(nextAll(element, []), function (el) {
        //Do what you need to do with the next elements here
    });

我在最近的项目中就是这样做的：

const nextAll = (element) => {
    let siblingElements = []
    let elem = document.querySelector(element)

    while (elem.nextElementSibling) {
        siblingElements.push(elem.nextElementSibling)
        elem = elem.nextElementSibling
    }

    return siblingElements
 }

致电：

 nextAll('.layer')

在.prevAll（）中，尝试获取同级，直到索引到达选择器，将它们添加到数组中。nextAll（）应该跳过直到包含选择器，然后将剩余的添加到数组中。谢谢@TahaPaksu，我认为这种方法不适用于嵌套节点。这意味着，上一个节点不一定总是起始节点的同级节点
 nextAll('.layer')