2015年6月11日木曜日

【1日1コード】【jQuery】jQuery で イベントを次の行に起こすコード

ここ最近アウトプットが少なかったので、とりあえず毎日何らかのコードをアウトプットしてこうと思ったjunerです。

で、今回書いてたコードはイベントを次の行に伝播させるというコードですね。

結果だけ見る場合はこちらから

バリバリ装飾してるので装飾なしなら次の様になります。

$(function(){
$("#target")
.on("click","button",function(e,next){
$(this)
.closest("li")
.next("li")
.find("button")
.trigger("click");
});
});

解説

$elm.closest("li")

親を遡り、最初に該当セレクタに一致する要素があるとそれを返す函数。間に他の要素が挟まっていても確認できる為、非常に重宝する。

.closest()【ja】
$elm.next("li")

次の兄弟要素を取得する為の函数。セレクタを指定することで次の要素が無い場合かそのセレクタの要素であることを保証することができる。

.next()【ja】
$elm.trigger("click")

指定したイベントを起こす函数。第二引数にarguments相応の配列を渡すことで任意のイベントに引数を付けて起こすことができる。

.trigger() 【ja】

以上。