「脱jQuery」 生JSで.nextAll()のように全ての隣接した次の兄弟要素を取得する

jQueryなしのネイティブJavaScriptで同階層にある次の要素を全て取得します。

jQuery


$('.selector').nextAll();
$('.selector').nextAll('.active');

生JS


function nextAll(node, selector) {
  var list = [];
  var next = node.nextElementSibling;
  
  while (next && next.nodeType === 1) {
    list.push(next);
    next = next.nextElementSibling;
  }

  if (selector) {
    var node = [].slice.call(document.querySelectorAll(selector));
    
    list = list.filter(function(item) {
      return node.indexOf(item) !== -1;
    });
  }

  return list;
}

単純に while 文で .nextElementSibling があれば配列にプッシュしています。第2引数がある場合は、その要素リストに list 配列の値が含まれるかどうかをチェックして抽出しています。


nextAll(document.querySelector('.selector'));

.selector 要素以降の 同階層 にある要素が取得できます。


<ul>
  <li>1</li>
  <li class="target">2</li>
  <li class="active">3</li>
  <li>4</li>
  <li class="active">5</li>
</ul>

nextAll(document.querySelector('.target'), '.active');
// => <li class="active">3</li>, <li class="active">5</li>

第2引数を指定すると、 .active 要素だけ取得できます。