tshinobu.com

Home > javascript > ある要素からの親要素を取得するjavascript関数

ある要素からの親要素を取得するjavascript関数

jQueryのparents()と同等の関数をjQueryレスで実装したいと思い解析して作りました。引数(基点となる要素, 検索する要素)を渡すと、基点となる要素から見て条件にマッチする親要素あるいは親要素群を返す関数です。

/*---------- 親要素を検索する ----------*/
var findParentElement = function(elem, query){
	var result = [];
	var matched = [], cur = elem["parentNode"];
	while ( cur && cur != document ) {
		if ( cur.nodeType == 1 )
			matched.push( cur );
		cur = cur["parentNode"];
	}
	for (var i=0; i<matched.length; i++){
		reg = new RegExp(query,"i");
		if(matched[i].nodeName.match(reg)){
			result = matched.splice(i,1);
			break;
		}
	}
	return result;
};
/*---------- 親要素郡を検索する ----------*/
var findParentElementsMulti = function(elem, query){
	var result = [];
	var matched = [], cur = elem["parentNode"];
	while ( cur && cur != document ) {
		if ( cur.nodeType == 1 )
			matched.push( cur );
		cur = cur["parentNode"];
	}
	for (var i=0; i<matched.length; i++){
		reg = new RegExp(query,"i");
		if(matched[i].nodeName.match(reg)){
			result.push(matched[i]);
		}
	}
	return result;
};

たとえば、以下のようなHTMLがあったときに「親要素を表示」を押すと「div.release-block」のオブジェクトが返ります。「親要素群を表示」を押すと配列で「div.release-block, div.primary-area, div.main-area, div.container」のオブジェクトが返ります。

<div class="container">
  <div class="main-area">
    <div class="primary-area">
      <div class="release-block release-block-parent">
        <h2>本社プレスリリース</h2>
        <dl>
          <dt>2009年11月18日</dt>
          <dd><a href="#" onclick="alert(findParentElement(this,'div'));return(false);">親要素を表示</a></dd>
          <dt>2009年10月29日</dt>
          <dd><a href="#" onclick="alert(findParentElementsMulti(this,'div'));">親要素群を表示</a></dd>
        </dl>
      </div>
      <div class="release-block release-block-group">
        <h2>関連会社プレスリリース</h2>
        <dl>
          <dt>2009年11月18日</dt>
          <dd><a href="#" onclick="alert(findParentElement(this,'div'));return(false);">親要素を表示</a></dd>
          <dt>2009年10月29日</dt>
          <dd><a href="#" onclick="alert(findParentElementsMulti(this,'div'));">親要素群を表示</a></dd>
        </dl>
      </div>
    </div>
  </div>
</div>

サンプル(新しいウィンドウで開きます)

返値を利用すれば条件にマッチする要素でかつ、必要なクラス名だけ抽出することも可能です。同等のファンクションを提供する際、HTMLの構造が違う場合に都度分岐させるのは非常に煩雑で面倒なので、繰り返し適用できるように工夫できます。

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://tshinobu.com/blog/archives/245/trackback
Listed below are links to weblogs that reference
ある要素からの親要素を取得するjavascript関数 from tshinobu.com

Home > javascript > ある要素からの親要素を取得するjavascript関数

Seminar 2/20(sat)
CSS Nite in TAKAMATSU, Vol.2
Seminar 3/6(sat)
SwapSkills 3月7日 開催 サルでもできるウェブデザイン
Seminar 4/17(sat)
CSS Nite LP, Disk 9「Coder's Higher」
Search
Pages
Recent Entries
Categories
Archives
Tag Cloud
Meta

Recent Actions

Blogparts

  • あわせて読みたいブログパーツ
  • My Profile by iddy
  • Add Me

↑pagetop