Как выбрать входной дочерний элемент смежной строки с помощью jQuery?

Question

Я надеюсь, что кто-нибудь может помочь мне с синтаксисом для селектора jQuery. Я просто не могу заставить его работать! Я пытаюсь выбрать поле ввода, которое относится к строке таблицы, которая содержит div с классом span. Вот 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), который имеет класс «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

Как указал Сарфраз, в селекторе "td: input" вам нужен пробел - элементы td никогда не являются элементами формы, и, очевидно, вы ищетеВ любом случае, введите child элемента td.

Но это только вторая ошибка: вы не ищете прямого потомка строки, вы ищете внука - все же children() будет искать только непосредственные потомки элементов контекста.То, что вы действительно хотите использовать, это find() ...

$("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");
});