よくリストタグ<li>にborderを指定するが「最後（最初）の行だけborderがいらない」とうパターンが多い。
わざわざ最後（最初）の<li>タグにだけスタイルを指定してborderを消すのも面倒だしCSS3の「:last-child」や「:first-child」は対応していないブラウザがあるので、悩んだ結果jQueryで消すのが一番簡単且つブラウザ対応も間違いないと思い、以下のようなスクリプトを作成しました。
わざわざ最後（最初）の<li>タグにだけスタイルを指定してborderを消すのも面倒だしCSS3の「:last-child」や「:first-child」は対応していないブラウザがあるので、悩んだ結果jQueryで消すのが一番簡単且つブラウザ対応も間違いないと思い、以下のようなスクリプトを作成しました。
リストの最後のborderを消す
■html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
1 2 3 | #sample li { border-bottom: dotted 1px #ccc;} |
■javascript
1 2 3 4 5 | $(function() { $("#sample ul").each(function() { $("li:last-child").css('border', 'none'); });}); |
解説
style指定で<li>タグには破線のアンダーラインが付きます。
1 2 3 | #sample li { border-bottom: dotted 1px #ccc;} |
次にjQueryの部分ですが、each(callback)は条件に当てはまる要素に対して繰り返し処理（callback）を行ないます。
今回の場合はID名「sample」の子要素「<ul>」が見つかる度に・・・
2 | $("#sample ul").each(function() { |
最後の<li>タグからborderを消す、という処理を書いています。
3 | $("li:last-child").css('border', 'none'); |
上記ソースの「:last-child」で”最後のひとつ”を指定してます。ちなみに「:first-child」だと”最初のひとつ”となります。
