jQuery를 사용하여 인접 행의 입력 하위를 어떻게 선택할 수 있습니까?

Question

누군가 jQuery 선택기 구문을 도와 줄 수 있기를 바랍니다. 나는 그것을 작동시킬 수 없다! span 클래스의 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를 변경하여 강조 표시 할 수 있습니다. 테두리 색을 빨간색으로 변경합니다.

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

어떤 제안 :

이것은 내가 시도했지만 작동하지 않는 jQuery를 무엇입니까?

Answer 1

두 가지 주요 오류가 있습니다. Sarfraz가 지적한 것처럼, 당신은 "TD : 입력"의 공간이 필요

$("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 요소 요소를 형성하지 않습니다, 분명히 당신은 입력 을 찾고 어쨌든 td 요소의 자식.

하지만 두 번째 오류 만 노출됩니다. 즉, 행의 하위 항목을 찾고 있지 않습니다. 즉, 하위 요소 인 - yet children() will search only the immediate descendants의 컨텍스트 요소를 찾고 있습니다. 당신이 정말 사용하려는 것은 ... find() 당신의 목적을 위해, 당신이 정말로 the :input selector 사용할 필요가 없습니다

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