実務に役立つ！javascriptでliタグの自動でクラス名を付ける方法

公開日：2019/07/24

CMSを使ってサイト制作をする際に、新着5件表示やランキング3件表示などのコンテンツを作ることが多いと思います。CMSの設定で同じタグ構造の各5件を表示したりします。

そんな時、何番目だけクラス名を変えたいや追加したいなど思う事があります。ですが、CMS側で書き出されるため好きなliタグにクラス名を追加することができない・・・。こういった状況のときはjavascriptで制御しクラス名を付けることができます。

<ul>
	<li>1番目</li>
	<li>2番目</li>
	<li>3番目</li>
	<li>4番目</li>
	<li>5番目</li>
	<li>6番目</li>
</ul>

<ul>

</ul>

上記のようにhtmlに記述し、下記のようにcssを指定します。

ul li.n2 {
  color: #f00;
}

ul li.n2 {

color: #f00;

}

このままではfontの色は変わりません。
ここでjavascriptに2番目のliタグにn2というクラス名をつけます。

$(function() {  
	$("ul").each(function(){
		jQuery(this).find("li:nth-child(2n)").addClass("n2");
	});   
});

$(function() {

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

jQuery(this).find("li:nth-child(2n)").addClass("n2");

});

上記をjsファイルに記述することでページにアクセスすると2番目のliタグにn2というクラス名が付きます。

$(function() {  
	$("親タグ").each(function(){
		jQuery(this).find("クラス名をつけるタグ").addClass("クラス名");
	});   
});

$(function() {

$("親タグ").each(function(){

jQuery(this).find("クラス名をつけるタグ").addClass("クラス名");

});

上記のように「親タグ」にliの親タグulを記述し、「クラス名を付けるタグ」にどのタグにクラスを付けるか決めます。最後の「クラス名」にお好きなクラス名をつけてください。

これでCMS側で書き出されるタグに関しても自由にクラス付けてcssで指定することができます。
一度、試してみてください。

このliの指定方法か別ページで紹介しています。参考になられる方はこちらの記事をご覧ください。