とっととhoge書こう

ああだこうだ言わずテスト書いてhoge出す

JavaScript

jQueryの.not()を生のJavaScriptでやる

投稿日:2019年2月14日 更新日:

jQueryを卒業してやるんだという強い意思

対象要素.not(除外する要素)といったことを、jQuery使わずJavaScriptでやりたい場面がありました。
.not()についてはこちら参考ください。
https://www.sejuku.net/blog/37111#not

そもそもJSのある配列(myArray)から、あるデータを削除したいとなったとき、そのあるデータが別の配列(toRemove)である場合は、下記の方法でできます。

myArray = myArray.filter( ( el ) => !toRemove.includes( el ) );

myArrayに対してfilterで、myArrayで一個一個取り出していって、
toRemoveの配列の中に、それらが入っているかincludesで確認して、ない場合は返す(左辺のmyArrayに追加されていく)といった感じですね。

下記StackOverflowにて例示されてました。ありがたし。。
https://stackoverflow.com/questions/19957348/javascript-arrays-remove-all-elements-contained-in-another-array/19957433#19957433

しかし別の問題で、JSでdocument.querySelectorAll()などしたものは、Arrayでなく、Nodelistなのでうまくfilterが使えないわけです。
Arrayにすればfilterつかえるので、変換する方法ないかな、と思ったらやはり解決法は存在してました。
https://qiita.com/uruha/items/fc9564f5a8564f075391#comment-bb48432a807bcc045fdc

つまり

let myArray = document.querySelector('.hoge img'); // 対象
let toRemove = document.querySelector('.hoge a img'); // 除外

上記の場合は、

myArray = Array.from(myArray).filter(( el ) => !Array.from(toRemove).includes( el ));

とすればmyArrayにはaタグで囲まれていない.hoge imgの要素にまとめられるのです。

今日も街の巨匠に感謝。

-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


関連記事

no image

Core Web VitalsでCLSがなかなか改善できない場合に見るべきこと

Core Web Vitalsの中でもCLS(Cummulative Layout Shift)がなかなか改善しない、と悩んでいる方向けです。 例えばPageSpeed Insightsで分析かけて指 …

要素のページ内での位置(高さ)取得

信じられないくらいその要素のページ内での高さの取り方を忘れるので、残します。 element.getBoundingClientRect() これはビューポートベースなので、window.pageYO …