jQueryメソッド原生js実装---siblings兄弟ノード

今日の作業ミスで、モバイルブラウザが動作しなくなり、es 6がコンパイルされずにプロジェクトに入ったと推定されています.経験が足りないから,失敗して知恵をつけよう.
仕事で兄弟ノードを使う場所はあまり多くありませんが、タブ、輪番図が使われるかもしれません.jQueryをさらに深化させるために,わざわざsiblings()法を研究してみた.

    
1
    
2
  
    
3
    
4
    
5
   
    
11
    

siblings = (o)=>{
    let arr = [] ; //      
    let prev = o.previousSibling; //o        
    //         
    while(prev){
        if(prev.nodeType == 1){
            arr.unshift(prev);//        ，      
        }
        prev = prev.previousSibling;//        prev
    }
    //        
    let next = o.nextSibling;//o        
    while(next){
        if(next.nodeType == 1){
            arr.push(next);//      ，      
        }
        next = next.nextSibling;//       next，    
    }
    return arr;
}

let odiv = document.getElementById('sibling1');

console.log(siblings(odiv));

上のコードは主にpreviousSiblingとnextSiblingの2つのhtml属性を使用し、それぞれ同胞ノードを取得するために使用されます.しかし、以上のコードには深刻な欠点があります.彼の同胞要素は実験を経て同じレベルの要素を指しています.上のdiv兄弟要素のように、同級のpラベルを11の値のpラベルに含め、ulが包まれていなければ、scriptも含められます.同じレベルだからです.
これは私たちが望んでいるものではないので、部分的に要素に合わないものをフィルタします.フィルタリングの根拠は現在のラベル名です.例えばdivラベル兄弟を探すには、同胞要素ラベルを比較します.コードは次のとおりです.

//js  jQuery siblings()  

siblings = (o)=>{
    let arr = [] ; //      
    let prev = o.previousSibling; //o        
    //         
    while(prev){
        if(prev.nodeType == 1&&prev.tagName == o.tagName){
            arr.unshift(prev);//        ，      
        }
        prev = prev.previousSibling;//        prev
    }
    //        
    let next = o.nextSibling;//o        
    while(next){
        if(next.nodeType == 1 &&next.tagName == o.tagName){
            arr.push(next);//      ，      
        }
        next = next.nextSibling;//       next，    
    }
    return arr;
}

let odiv = document.getElementById('sibling1');

console.log(siblings(odiv));

タグ名はtagName属性で取得し、比較判断でフィルタリングすればよい.古いルールで、jQueryチェーン呼び出しを真似します.

class aQuery {
    constructor(seletor){
        this.arr = [] ; //      
        this.seletor = document.querySelector(seletor);
    }
    siblings(){      
        let prev = this.seletor.previousSibling; //o        
        //         
        while(prev){
            if(prev.nodeType == 1&&prev.tagName == this.seletor.tagName){
                this.arr.unshift(prev);//        ，      
            }
            prev = prev.previousSibling;//        prev
        }
        //        
        let next = this.seletor.nextSibling;//o        
        while(next){
            if(next.nodeType == 1 &&next.tagName == this.seletor.tagName){
                this.arr.push(next);//      ，      
            }
            next = next.nextSibling;//       next，    
        }
        
        return this;
    }
}
console.log(new aQuery('#sibling1').siblings().arr)

手間を省くために、直接es 6のクラスclass構造を使いますが、newなし構造は実現していませんので、次回暇があれば追加します
参照リンク:http://www.zhufengpeixun.cn/jishuziliao/javaScriptzhuanti/2011-07-21/130.html