jqueryを使用して複数のtd要素の背景色を変更する方法

Question

jqueryを使用してテーブル内の複数のtd要素の背景色を変更できません。

HTMLコード：

<td id="trueValue">/com/website/seo/</td> 

<td id="trueValue">/com/website/seo/</td> 

<td id="falseValue">/com/website/seo/</td> 

<td id="falseValue">/com/website/seo/</td> 

のjQueryコード：

$("td").each(function() { 
var i = $(this).attr("id"); 
if (i == "trueValue") { 
    $(i).css("background-color", "green"); 
    } 
}); 

上記jqueryのは、何もしません。誰かが私のコードを修正してもらえますか？

多くの方々のおかげです。

Answer 1

複数の要素に同じidを割り当てることはできません。この例のHTMLは無効です。要素をグループ化する場合は、クラスを使用します。次に、あなただけのクラスで要素を選択し、それらにスタイルを適用し、このようにすることができます

$('.truevalue').addClass('foo');

.foo { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td class="truevalue">/com/website/seo/</td> 
 
    <td class="truevalue">/com/website/seo/</td> 
 
    <td class="falsevalue">/com/website/seo/</td> 
 
    <td class="falsevalue">/com/website/seo/</td> 
 
    </tr> 
 
</table>

Answer 2

あなたは、単一のWebページに同じid複数回を持つことはできません。非常に必要な場合は、html5 data属性を使用できます。

$("td[data-id='trueValue']").addClass("highlight");

.highlight { 
 
    background: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td data-id="trueValue">/com/website/seo/</td> 
 

 
     <td data-id="trueValue">/com/website/seo/</td> 
 

 
     <td data-id="falseValue">/com/website/seo/</td> 
 

 
     <td data-id="falseValue">/com/website/seo/</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

あなたは、テーブルの行とその記述を作成するには、表を使用する必要があります。

HTML

<table> 
    <tr> 
    <td id="falseValue"> XYZ </td> 
    <td id="trueValue"> ABC </td> 
    </tr> 
</table> 

jQueryの

$("td").each(function() { 
    var i = $(this).attr("id"); 
    if (i === 'trueValue') { 
    $(this).css({ 
     'backgroundColor': 'green', 
     'color': 'white' 
    }); 
    } 

}); 

ワーキングフィドル：https://jsfiddle.net/rittamdebnath/p3fe1hv5/