jQuery ändern td: Farbe mit mehreren Anweisungen

Question

Ich habe eine einfache HTML-Tabelle, wenn TD-Tag enthält Wörter "Stunde" und "Tag" Ich möchte die Farbe zu rot. Ich habe es mit einer Erklärung:

$("td:contains('hour')").css("color", "red");

möchte ich das Wort "Tag" sind, habe ich versucht, weiter:

1. $("td:contains('hour') && td:contains('day')").css("color", "red");

2. if ($ ("td: enthält (‘ Stunde ') ") & & ($" td: enthält (' Tag ') ")) { css (" color "," red "); }

Wie kann ich es tun?

Answer 1

Versuchen Sie so.Für mehrere Wörter verwenden Sie wieder contains.

$("td:contains('hour'):contains('day')").css("color", "red"); 

Beispiel

$("p:contains('is'):contains('name')").css("background-color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<p>My name is Donald.</p><!--it will matched contains both `is` and `name`--> 
 
<p>I live in Duckburg.</p><!--not matched --> 
 
<p>My best friend is Mickey.</p><!--not matched contains only `is`-->

Answer 2

Sie müssen die Wähler weiter verfeinern, nachdem das erste Spiel zu finden, und die Fall empfindliche Art Ihres Tests (nur Klein bewusst sein, Übereinstimmungen werden gefunden).

$("td:contains('hour'):contains('day')").css("color", "red");

table, td { border:1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>Hour</td> 
 
    <td>Day</td> 
 
    <td>hour</td> 
 
    <td>day</td> 
 
    <td>None</td> 
 
    <td>hour and day</td> 
 
    <td>Hour and Day</td> 
 
    </tr> 
 
</table>

Für Groß- und Kleinschreibung Suche:

var theCells = $("td"); 
 

 
// Loop through the cells and check lower-case text against lower-case value 
 
theCells.each(function(){ 
 
    if(this.textContent.toLowerCase().indexOf("hour") > -1 && 
 
    this.textContent.toLowerCase().indexOf("day") > -1){ 
 
     this.style.color = "red"; 
 
    } 
 
});

table, td { border:1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>Hour</td> 
 
    <td>Day</td> 
 
    <td>None</td> 
 
    <td>hour and day</td> 
 
    <td>Hour and Day</td> 
 
    </tr> 
 
</table>