Wie ändere ich die Hintergrundfarbe von mehreren Td-Elementen mit jquery

Question

Ich kann nicht die Hintergrundfarbe von mehreren td-Elemente in einer Tabelle mit jquery ändern.

HTML-Code:

<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-Code:

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

Die obige jquery nichts tut. Kann jemand bitte meinen Code korrigieren?

Vielen Dank im Voraus.

Answer 1

Sie können nicht mehrere Elemente mit demselben id haben. Ihr HTML in diesem Beispiel wäre ungültig. Wenn Sie Elemente gruppieren möchten, verwenden Sie Klassen. Dann können Sie nur die Elemente von Klasse auswählen und anwenden das Styling zu ihnen wie folgt aus:

$('.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

Sie können nicht haben gleiche id mehrfach in einer einzelnen Webseite. Wenn es sehr notwendig ist, können Sie html5 data Attribut verwenden.

$("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

Sie Tabelle verwenden sollten Tabellenzeilen und ihre Beschreibungen zu erstellen.

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' 
    }); 
    } 

}); 

Arbeits Fiddle: https://jsfiddle.net/rittamdebnath/p3fe1hv5/