Выделить все элементы в TD с определенным ID

Question

Как выбрать все элементы в моем td, чей идентификатор заканчивается 2?

В моем коде IDs 2-го и 4-го элементов заканчивается 2, поэтому цвет фона этих элементов должен быть красным.

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

Это мой подход:

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

FIDDLE.

Answer 1

Используйте этот JQuery

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

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

Примечание: Вы можете просто использовать $("[id$=2]") в качестве селектора.

Answer 2

jQuery Selector: Id Ends With?

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

Просто взгляните на этой ссылки ..

Если вы знаете, элемент типа, то: (например: вместо 'элемент' с 'DIV')

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

или

использовать звездочку ' *»В начале

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

как этот

Answer 3

Первая проблема заключается в том, что ваш FIDDLE не работает, потому что вы забыли включить jQuery.

Вторая проблема - ваш запрос. Интервал является важным при определении селекторов. В вашем запросе у вас есть td:nth-child(1)[id$=2]. Поскольку между td:nth-child(1) и [id$=2] нет места, вы в основном ищете td с определенным идентификатором. Вы хотите найти входной элемент в пределахtd. Это было бы более подходящим td:nth-child(1) [id$=2] - обратите внимание на пробел между ними. Пробел указывает, что вы хотите найти все подшивки of td. Если вы хотите искать только прямых детей, вы можете использовать >, чтобы обозначить это следующим образом: td:nth-child(1) > [id$=2].

Вы также можете упростить свой запрос для этого конкретного сценария. Если вы хотите, чтобы все входы, которые имеют идентификатор, который заканчивается в 2, то вы можете использовать JQuery :input псевдо-селектор, чтобы нацелить их так:

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

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

Описание: Выбирает все входные , textarea, элементы выбора и кнопки.