「脱jQuery」 生JSで.prevAll()のように全ての隣接した前の兄弟要素を取得する
jQueryなしのネイティブJavaScriptで指定要素より前にある全ての要素を取得します。
jQuery
$('.selector').prevAll();
$('.selector').prevAll('.active');
生JS
function prevAll(node, selector) {
var list = [];
var prev = node.previousElementSibling;
while (prev && prev.nodeType === 1) {
list.unshift(prev);
prev = prev.previousElementSibling;
}
if (selector) {
var node = [].slice.call(document.querySelectorAll(selector));
list = list.filter(function(item) {
return node.indexOf(item) !== -1;
});
}
return list;
}
previousElementSibling
で前の隣接要素を取得できるので、 while
文で回して取得しています。
prevAll(document.querySelector('.selector'));
.selector
要素より前の要素リストを取得できます。
prevAll(document.querySelector('.selector'), '.active');
また、第2引数に セレクタ を指定するとその条件に合った要素のみを抽出します。
CSS本執筆しました!!!
CSS本出します!1/29発売予定
— たかもそ@CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs