以下のようなテーブルがあるとします。

<table>
<tbody>
<tr>
<th>果物の名前</th>
<th>サイズ</th>
<th>値段</th>
</tr>
<tr>
<td>レモン</td>
<td>小</td>
<td>50円</td>
</tr>
<tr>
<td>りんご</td>
<td>中</td>
<td>100円</td>
</tr>
<tr>
<td>ぶどう</td>
<td>大</td>
<td>80円</td>
</tr>
</tbody>
</table>

ここで、サイズが小であれば、その行にsmallというクラスを、中ならmiddle、大ならbigというように、指定した文字列に対応するクラスを付与したいのです。

if (行中に小という文字列があるなら) {そのtrにaddClass(small)}
```みたいな感じになると思うのですが、書き方でつまづいています。。。

行動規範の内容に同意します

回答3件

本題ではありませんが、1つコメントします。

テーブルの中身が動的に変わるわけでないのなら、テーブルの内容とクラスは変わらず対応しますので、jQueryでクラスを与えるよりHTML段階でクラスを付けるという方が適当ではないかと思います。

「何らかのシステムで生成するためにHTMLは簡単に触れず、JavaScriptで設定する」というような事情も考えられますが、それもまさに「弥縫策」と言った感じで、積極的にやるような方策ではないと考えます。

投稿2017/08/02 10:17

maisumakun

総合スコア145183

たとえばこう

javascript
1$(function(){
2  [
3    {html:"小",class:"small"},
4    {html:"中",class:"middle"},
5    {html:"大",class:"big"},
6    ].map(function(i){
7    $('tr').has($('td').filter(function(){return $(this).html()==i.html})).addClass(i.class);
8  });
9});
10

追記

jQueryならeachでよかったかもしれませんね

javascript
1$(function(){
2  $.each({"小":"small","中":"middle","大":"big"},function(i,j){
3    $('tr').has($('td').filter(function(){return $(this).html()==i})).addClass(j);
4  });
5});

参考

CSS
1.small{color:aqua;}
2.middle{background-color:yellow;}
3.big{font-size:1.5em;}

HTML
1<table>
2<tbody>
3<tr>
4<th>果物の名前</th>
5<th>サイズ</th>
6<th>値段</th>
7</tr>
8<tr>
9<td>レモン</td>
10<td>小</td>
11<td>50円</td>
12</tr>
13<tr>
14<td>りんご</td>
15<td>中</td>
16<td>100円</td>
17</tr>
18<tr>
19<td>ぶどう</td>
20<td>大</td>
21<td>80円</td>
22</tr>
23<tr>
24<td>とくになし</td>
25<td>とくになし</td>
26<td>とくになし</td>
27</tr>
28<tr>
29<td>大</td>
30<td>中</td>
31<td>小</td>
32</tr>
33</tbody>
34</table>

投稿2017/08/02 10:58

編集2017/08/03 00:43

yambejp

総合スコア114779

ベストアンサー

的外れかもしれませんが、以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        .small {
8            background-color: #0e63fb;
9        }
10
11        .middle {
12            background-color: #5cb85c;
13        }
14
15        .big {
16            background-color: #a9ff3a;
17        }
18    </style>
19</head>
20<body>
21<table id="table1">
22    <tbody>
23    <tr>
24        <th>果物の名前</th>
25        <th>サイズ</th>
26        <th>値段</th>
27    </tr>
28    <tr>
29        <td>レモン</td>
30        <td>小</td>
31        <td>50円</td>
32    </tr>
33    <tr>
34        <td>りんご</td>
35        <td>中</td>
36        <td>100円</td>
37    </tr>
38    <tr>
39        <td>ぶどう</td>
40        <td>大</td>
41        <td>80円</td>
42    </tr>
43    </tbody>
44</table>
45<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
46<script>
47    $(function () {
48        $("tr > td:nth-of-type(2)").each(function () {
49            switch ($(this).text()) {
50                case "小":
51                    $(this).addClass("small");
52                    break;
53                case "中":
54                    $(this).addClass("middle");
55                    break;
56                case "大":
57                    $(this).addClass("big");
58                    break;
59            }
60        });
61    });
62</script>
63</body>
64</html>