ジャンボモナカ

34歳のハゲデブがHTML5ハイブリッドアプリ開発プラットフォームmonacaを始めました。

脱jQuery~JavaScriptに支配されないための真の思考法~ parent([selector])メソッド

jQueryのparentメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

// jQuery
var _$parent = $('#hoge').parent();


// JavaScript
var _parentNode = document.querySelector('#hoge').parentNode;

selectorを使う場合は、classListのプロパティーのcontainsメソッドで確認を行い配列に追加することで実現できる。

// jQuery
var _$foo = $('.hoge').parent('.foo');


// JavaScript
var _parentNode = [];
document.querySelectorAll('.hoge').forEach(function(current){
  var parentNode = current.parentNode;
  if(parentNode.classList.contains('foo')){
    _parentNode[_parentNode.length] = parentNode;
  }
});