読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

jQueryでlistの中のhrefの値を取得して、クラスを追加

jQuery
<スポンサーリンク>

以下のようなナビゲーションメニューがあるとする。

<div class="collapse navbar-collapse">
	<!-- メニュー -->
	<ul class="nav navbar-nav">
		<li><a href="test1">テスト1</a></li>
		<li><a href="test2">テスト2</a></li>
		<li><a href="test3">テスト3</a></li>
		<li><a href="test4">テスト4</a></li>
		<li><a href="test5">テスト5</a></li>
	</ul>
</div>

これはbootstrapを使っているのだが、たとえば、この中のhref="test3"にだけ、class="active"を設定したいとする。

そういうときは、listの中を走査して、href="test3"を取得。
で、その親のli要素にclassを追加する必要がある。

さて、そのようなjQueryの実装は以下のとおり。

$('.navbar-collapse ul li a').each(function() {
	var $href = $(this).attr('href');
	if ($href == "test3") {
		$(this).parent().addClass("active");
	}
});

これで、hrefの属性を見て、test3だったら、その親のliにclassを追加することができる。

参考になるStackoverflowは以下。
http://stackoverflow.com/questions/18370325/obtaining-the-href-attribute-value-from-each-li-using-the-find-method


jQueryをはじめて勉強するなら

jQuery最高の教科書

jQuery最高の教科書

色んな本があるけど、まずはこの本を写経するのがいいと思う。