jQueryでthisの小要素を指定する方法

例えばあるdiv#hogeをhoverした際に、その#hoge内のh2とpのテキスト色を同時に変えたいみたいな時に、jQieryでthisの小要素を指定できるとhoverのfunctionがひとつで済んで便利。


<div id="hoge">
    <h2>一緒だよ</h2>
    <p>一緒に変化するよ</p>
</div>


色々方法があるけど、

$("hoge",this)

が一番シンプルで使いやすいと思う。

上記コードで使うと


$("#hoge").hover(function() {
		$("h2",this).stop().animate({ color: "#444444" }, 'slow');
		$("p",this).stop().animate({ color: "#444444" }, 'slow');
	},function() {
		$("h2",this).stop().animate({ color: "#222222" }, 'slow');
		$("p",this).stop().animate({ color: "#666666" }, 'slow');
	});

その他、

$(this).children("hoge")
$(this).find("hoge")

など。

Javascript/jQuery | | トラックバック(0) |
Share |

トラックバック(0)

トラックバックURL: http://www.spiral-records.com/mt/mt-tb.cgi/1323

Facebookコメントプラグイン

月別

>
Powered by Movable Type 4.261

Tumblr : log long long time ago