jQueryのクラスをVanillaJSの親からクラスに変換する方法

Question

jQueryメソッドを以下のようにVanillaJSに変換しようとしています。

のjQuery：

elements.parent(".item").removeClass("item"); 

バニラ：

var parent = elements.parentNode; 
parent.querySelector(".item").classList.remove('item'); 

しかし、バニラのスクリプトはjQueryのと同じように動作していません。誰かより良い解決法を提案してください。

Answer 1

elementsが複数あるとすれば、それはコレクションであると仮定しているので、.forEach()を使用してください。あなただけ.item要素に絞り込む必要はありません

elements.forEach(function(el) { 
    el.parentNode.classList.remove("item"); 
}); 

注は（elementsが実際Arrayでない限り、これは、従来のブラウザでパッチを適用する必要があります）。それがクラスを持っていない場合、それはノーオペレーションになります。

また、.querySelectorは子孫のみを検索します。他の理由でクラスをフィルタリングする必要がある場合は、.matchesを使用します。

elements.forEach(function(el) { 
    var par = el.parentNode; 
    if (par.matches(".item")) { 
    // Do work with the `.item` element 
    par.classList.remove("item"); 
    } 
}); 

---

.itemクラスを持つ複数の祖先が存在し得る場合には、ネストされたループ内でこれらの先祖を横切ります。

elements.forEach(function(el) { 
    var par = el.parentNode; 
    do { 
    if (par.matches(".item")) { 
     // Do work with the `.item` element 
     par.classList.remove("item"); 
    } 
    } while((par = par.parentNode)); 
}); 

---

あなたが頻繁にこれをやっている場合は、ヘルパー関数を作ることができます。

function ancestors(el, filter) { 
    var res = []; 
    var par = el.parentNode; 
    do { 
    if (!filter || par.matches(filter)) { 
     res.push(par); 
    } 
    } while((par = par.parentNode)); 

    return res; 
} 

だから、それはこのようなものです。

elements.forEach(function(el) { 
    ancestors(el, ".item") 
    .forEach(function(par) { par.classList.remove(".item"); }); 
});