Как выбрать дочерний элемент из соседней строки с помощью 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> 

Если есть ошибка либо с полем будет создан ДИВ (эхо 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 

Как Sarfraz отметил, что вам нужно место в «тд: вход» селектор - TD элементы не образуют элементы, и, очевидно, что вы ищете вход ребенок элемента td в любом случае.

Но это только выдает вторую ошибку: вы не ищете прямого ребенка из строки, вы ищете внука - yet children() will search only the immediate descendants элементов контекста. То, что вы действительно хотите использовать 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 

Обратите внимание, что для ваших целей, вы на самом деле не нужно использовать the :input selector - input будет работать нормально, как хорошо, так как в этом примере вы дали , это на самом деле элемент <input>, который вы ищете ... Но если вы планируете использовать другие элементы управления формой: вход будет немного более гибким.

Answer 2

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