jQuery記述5行でliタグの最後のborderを非表示にする方法



liタグの最後のborder-bottomを消す(none)ことはよくありますが、
CSSでやるのではなくjQueryで消して見ます。

1.読み込むJs

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

2.CSSの記述例

以下は任意に調整してみて下さい。

<style type="text/css">
<!--
#idList{
	width:180px;
	text-align:left;
	margin:0 auto;
}
#idList li {
	list-style-position:inside;
	list-style-type:none;
	border-bottom: solid 1px #ccc;
	padding:7px 0 10px 5px;
}
#idList li a{
	text-decoration:none;
	color:#333333;
}
#idList li a:hover{
	text-decoration:underline;
	color:#666666;
}
-->
</style>

3.JavaScriptの記述例

<script type="text/javascript">
$(function() {
	$("#idList ul").each(function() {
		$("li:last-child").css('border', 'none');
	});
});
</script>

4.HTMLの記述例

    <div id="idList">
<ul>
<li><a href="/category/css" title="CSS | BLINDER HIDDEN" target="_blank">CSS</a></li>
<li><a href="/category/facebook" title="Facebook | BLINDER HIDDEN" target="_blank">Facebook</a></li>
<li><a href="/category/html5" title="HTML5 | BLINDER HIDDEN" target="_blank">HTML5</a></li>
<li><a href="/category/javascript" title="JavaScript | BLINDER HIDDEN" target="_blank">JavaScript</a></li>
<li><a href="/category/php" title="PHP | BLINDER HIDDEN" target="_blank">PHP</a></li>
<li><a href="/category/seo" title="SEO | BLINDER HIDDEN" target="_blank">SEO</a></li>
<li><a href="/category/smartphone" title="スマートフォン | BLINDER HIDDEN" target="_blank">smartphone</a></li>
<li><a href="/category/wordpress" title="WordPress | BLINDER HIDDEN" target="_blank">WordPress</a></li>
</ul>
    </div>

liタグの最後のborderを非表示にするデモページ

WordPressテーマのカスタムやPHPでリストタグを表示させる際、
CSSで最後のliタグのみボーターを消すのって結構面倒だったりします。
そんな時に便利です。