2018.01.20

｢脱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 要素だけ取得できます。

CSS本執筆しました！！！

CSS本出します！1/29発売予定
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日

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

jQuery

生JS

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