【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「parent()」メソッドを仕様すりぁいいじゃんと思いきやそううまくいかず。
かと言って直接「$(“div#親要素名”)」と指定できない場合で微妙だったりした場合。

parents()メソッドを仕様する

parentメソッドの場合は複数の親要素があっても1つの親要素しか返さないのに対して、parentsメソッドは親要素のさらに親要素・・・とルート要素以外すべて返してくるようです。

parentcheck.html

1番上の親要素
	

    
2番に上の親要素
    	

        
3番に上の親要素
        	親を調べる(parent)
            親を調べる(parents)
        
    

上記のhtmlを元にjqueryで試す

$(document).ready(function(){
//---------------------------------
$("#btn").click(check);     //parentメソッド用
$("#btn2").click(check2);  //parentsメソッド用
//---------------------------------
function check(){
alert($(this).parent().attr("id"));
	}
function check2(){
alert($(this).parents().attr("id"));
	}
});

上記の場合だと、どちらのメソッドでもひとつ上の親である「thirdWrap」が選択できます。
今回は一番上の親要素・・つまり一番外側のdiv要素「firstWrap」を取得したいのでその場合の挙動を「parent」と「parents」で行ってみた。

$(document).ready(function(){
//---------------------------------
$("#btn").click(check);     //parentメソッド用
$("#btn2").click(check2);  //parentsメソッド用
//---------------------------------
function check(){
alert($(this).parent().parent().parent().attr("id"));
	}
function check2(){
alert($(this).parents("div[id^='first']").attr("id"));
	}
});

動作確認

「parents()」の場合は親要素のfirstの一部を指定（全部指定できたらそもそも普通に指定するので・・）してみる。「parent（）」の場合は上記のようにparent().parent().parent()と3つ上の階層まで指定しているのでめんどいです。ただ階層が分かっているなら名前はなんでもいいし、逆に「parents()」は、あまり階層を意識しなくて済みそうだなーという印象。使い方間違ってるのかな。