jqueryで列ごとにスタイルを反映させる

電脳備忘録

店舗一覧リストをテーブルでつくった時、行ではなく列ごとにスタイルを反映させたときのメモ
Childフィルタを使うと解決できるようです。具体的にはこんな感じ、tableのクラスがshop-listのとき、4列にそれぞれ異なるスタイルを反映させています。

$(function() {
$("table.shop-list").each(function() {
$("td:nth-child(1)").addClass("shop-no");
$("td:nth-child(2)").addClass("shop-name");
$("td:nth-child(3)").addClass("shop-category");
$("td:nth-child(4)").addClass("shop-telno");
});
});

td:nth-child(3)では、行(親のtr要素)ごとに、それぞれ1からはじまる連番でかぞえて3番目のtd要素がマッチします。

jQueryのセレクタ Childフィルタ1

htmlでいちいち書く必要がないので楽ですね。

広告

ブログの維持費に充てるでございます・・・。