选择所有具有特定ID的TD元素

Question

如何选择所有以数字2结尾的元素？

在我的代码中，第二个和第四个元素的ID以数字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.

- Evgenij Reznik

---

它们不是 ID... 它们是类名 - The_Black_Smurf

@The_Black_Smurf：我的错，我已经纠正了。 - Evgenij Reznik

Answer 1

第一个问题是你的FIDDLE无法工作，因为你忘记了包含jQuery库。

第二个问题是你的查询语句。在定义选择器时，空格很重要。在你的查询中，你有td:nth-child(1)[id$=2]。由于td:nth-child(1)和[id$=2]之间没有空格，你实际上是在寻找一个具有特定id的td元素。你想要的是在td内部查找输入元素。更合适的写法是td:nth-child(1) [id$=2] - 注意两者之间的空格。这个空格表示你想要搜索td的所有后代元素。如果你只想搜索直接子元素，你可以使用>符号来表示，像这样：td:nth-child(1) > [id$=2]。

对于这种特定场景，你还可以简化你的查询语句。如果你想要以2结尾的所有输入元素，那么你可以使用jQuery的:input伪选择器来定位它们，如下所示：

该代码的作用是选择所有id以2结尾的input元素，并将它们的背景颜色设置为红色。

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

描述：选择所有的输入框、文本域、下拉框和按钮元素。

- Joel

Answer 2

使用这个jQuery。

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

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

注意：您可以使用 $("[id$=2]") 作为选择器。

- Munawir

---

这里需要注意的是 td:nth-child(1) 和 [id$=2] 之间的空格。这是因为以 2 结尾的 id 元素是 td 的后代且与其分离的。 - Cave Johnson

Answer 3

jQuery选择器：以Id结尾？

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

请看一下这些链接...

如果您知道元素类型，则可以：（例如：将“element”替换为“div”）

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

或者

在开头使用星号“*”

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

像这样

- Akhil Vijay