如何使用 jQuery 选择相邻行的输入子项？

Question

我希望有人可以帮助我了解 jQuery 选择器的语法。我就是无法让它发挥作用！ 我正在尝试选择与包含具有类跨度的 div 的表行相关的输入字段。 HTML 如下：

<tbody>
  <tr><th scope="col"><label for="username">Username</label><br /><?php echo form_error('username');?></th></tr>
  <tr><td><input type="text" id="username" name="username" value="<?php echo set_value('username');?>"/></td></tr>
  <tr><th scope="col"><label for="password">Password</label><br /><?php echo form_error('password');?></th></tr>
  <tr><td><input type="password" id="password" name="password" /></td></tr>
</tbody>

如果任一字段出现错误，将创建一个 div (echo form_error)，该 div 具有“form_error”类并包含描述错误的文本。

如果出现错误，我想选择文本输入，以便我可以通过更改 CSS 来突出显示，例如将边框的颜色更改为红色。

这是我尝试过但不起作用的 jQuery：

$(document).ready(function() {
$("tr:has(.form_error)").next().children("td:input").css("border-color", "#C21312");
});

有什么建议吗？

Answer 1

你有两个重大错误。请允许我分解一下您的代码：

$("tr:has(.form_error)") // finds row containing element with form_error class
  .next() // move to the next row
  .children("td:input") // find a direct child of the row 
                        // that is both a td and input element
  .css("border-color", "#C21312"); // make border color red

正如 Sarfraz 指出的那样，您需要在“td:input”选择器中留出一个空格 - td 元素永远不是表单元素，显然您正在寻找一个输入子无论如何，td元素。

但这只会暴露第二个错误：您不是在寻找该行的直接子代，而是在寻找孙子 - 但是 children() 将仅搜索上下文元素的直接后代。您真正想要使用的是find()< /a>...

$("tr:has(.form_error)") // finds row containing element with form_error class
  .next() // move to the next row
  .find("td :input") // find an input element descendant of the row 
                     // that has a td as its parent
  .css("border-color", "#C21312"); // make border color red

请注意，出于您的目的，您实际上并不需要使用 :input 选择器 - input 也可以正常工作，因为在您给出的示例中，它实际上是一个 元素您正在寻找...但如果您还计划使用其他表单控件，:input 将为您提供更多的灵活性。

Answer 2

$(document).ready(function() {
    $("tr:has(.form_error)").parent('tr').find("input").css("border-color", "#C21312");
});