概要
再生リストをDOMアクセスする場合、リストの構造がネスト構造になっていて複雑な場合、深いところにあるセレクターをチェックしたい場合、どうしたらいいか悩んでいたところ、find()メソッドが使えることに気がつきました。このfind()メソッドをメソッドチェーンでつなげて行くと簡単に深いところにある、セレクターをチェックできました。
事例
「なつかしの曲(ポータル)」サイトの王冠再生ボタンでそのテクニックを使用しました。
//王冠を再生
//
var crown_list=[];
//王冠再生ボタンのクリックイベント処理
//
$(document).on("click","#crown_play",function (e){
crown_list = [];
//再生リストのタグを順にチェックして、class=".goodness"
//要素の中に<img要素があるかをチェック
$.each($(".ui-state-default"),function(i,val){
//.goodnessに、<imgタグがあるかチェック
if($(val).find(".goodness").find("img").length===1){
//あれば、crown_list配列に保存
crown_list.push(val);
}
});
//
if(crown_list.length!==0){
//id="sortable"要素へセット
$("#sortable").html(crown_list);
}
});
//
ここで、.find()メソッドを2回続けて使用しています。要素の中の要素をチェックしています。
DOMチェックで、要素の中の要素と深いところにある要素を、この.find()メソッドチェーンを続けることでチェックできます。
あとがき
.find()を使わなければ、非常に複雑で長ったらしいコードを書くところでした。気が付いてよかったです。