- 投稿日時
- 2010/01/05 2:31
- カテゴリー
- javascript
- タグ
- 記事のURL
- http://tshinobu.com/blog/archives/245
- ブックマーク
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
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




