「脱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本執筆しました!!!