Wählen Sie alle Elemente in TD mit bestimmten ID

Question

Wie kann ich alle Elemente in meinem td, dessen ID endet mit einem 2?

In meinem Code, die IDs des 2. und 4. Element enden mit einem 2, so dass diese Elemente Hintergrundfarbe rot werden soll.

<table> 
    <tr> 
    <td> 
     <input type="text" id="abc|1"> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <select id="def|2"> 
     <option>123</option> 
     <option>456</option> 
     <option>789</option> 
     </select> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="radio" id="ghi|1" /> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <input type="text" id="jkl|2"> 
    </td> 
    </tr> 
</table> 

Das ist mein Ansatz:

$("table td:nth-child(1)[id$=2]").css("background-color", "red"); 

FIDDLE.

Answer 1

verwenden jQuery

$("table td:nth-child(1) [id$=2]").css("background-color", "red"); 

JSFiddle: https://jsfiddle.net/torjpv9t/3/

Hinweis: Sie einfach $("[id$=2]") als Selektor verwenden können.

Answer 2

jQuery Selector: Id Ends With?

http://api.jquery.com/all-selector/

Sie einen Blick auf diese Links nehmen ..

Wenn Sie wissen das Element geben Sie dann: (zB: ersetzen 'Element' mit 'div')

$("element[id$='txtTitle']") 

oder

verwenden Sie asterisk ' * Am Anfang‘

$('*[id*=mytext]:... 

wie diese

Answer 3

Das erste Problem ist, dass Ihr FIDDLE nicht funktioniert, weil Sie vergessen haben, jQuery einzuschließen.

Das zweite Problem ist Ihre Abfrage. Abstand ist wichtig beim Definieren von Selektoren. In Ihrer Abfrage haben Sie td:nth-child(1)[id$=2]. Da zwischen td:nth-child(1) und [id$=2] kein Platz ist, suchen Sie grundsätzlich nach einer td mit einer bestimmten ID. Was Sie wollen, ist das Eingabeelement innerhalb der td zu finden. Dies wäre passender - beachten Sie den Abstand zwischen. Das Leerzeichen zeigt an, dass Sie alle Nachkommen des td suchen möchten. Wenn Sie nur direkte Kinder suchen möchten, können Sie die > verwenden, um dies als td:nth-child(1) > [id$=2] zu bezeichnen.

Sie können Ihre Abfrage auch für dieses spezielle Szenario vereinfachen. Wenn Sie alle Eingaben wollen, die eine ID haben, die in 2 endet, dann können Sie jquery :input Pseudo-Selektor verwenden, um sie gezielt in etwa so:

$(":input[id$=2]").css("background-color", "red");

https://api.jquery.com/input-selector/

Beschreibung: Wählt alle Eingaben , Textarea, Auswahl- und Schaltflächenelemente.