リストの最後(最初)のborderを消す

リストの最後(最初)のborderを消す

よくリストタグ<li>にborderを指定するが「最後(最初)の行だけborderがいらない」とうパターンが多い。
わざわざ最後(最初)の<li>タグにだけスタイルを指定してborderを消すのも面倒だしCSS3の「:last-child」や「:first-child」は対応していないブラウザがあるので、悩んだ結果jQueryで消すのが一番簡単且つブラウザ対応も間違いないと思い、以下のようなスクリプトを作成しました。




リストの最後のborderを消す
■html
<body>
<div id="sample">
<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>
<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>
<ul>
<li>1行目</li>
<li>2行目</li>
<li>3行目</li>
</ul>
</div>
</body>
■css
#sample li {
  border-bottom: dotted 1px #ccc;
}
■javascript
$(function() {
	$("#sample ul").each(function() {
		$("li:last-child").css('border', 'none');
	});
});
解説

style指定で<li>タグには破線のアンダーラインが付きます。

#sample li {
  border-bottom: dotted 1px #ccc;
}

次にjQueryの部分ですが、each(callback)は条件に当てはまる要素に対して繰り返し処理(callback)を行ないます。

今回の場合はID名「sample」の子要素「<ul>」が見つかる度に・・・

	$("#sample ul").each(function() {

最後の<li>タグからborderを消す、という処理を書いています。

		$("li:last-child").css('border', 'none');

上記ソースの「:last-child」で”最後のひとつ”を指定してます。ちなみに「:first-child」だと”最初のひとつ”となります。



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です