title: How can I select the input child of an adjacent row using jQuery?
body: <p>I'm hoping someone can help me with the syntax for a jQuery selector. I just can't get it to work!
  I'm trying to select the input field that relates to the table row that contains a div with class span. Here's the HTML:</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr&gt;&lt;th scope="col"&gt;&lt;label for="username"&gt;Username&lt;/label&gt;&lt;br /&gt;&lt;?php echo form_error('username');?&gt;&lt;/th&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="text" id="username" name="username" value="&lt;?php echo set_value('username');?&gt;"/&gt;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;th scope="col"&gt;&lt;label for="password"&gt;Password&lt;/label&gt;&lt;br /&gt;&lt;?php echo form_error('password');?&gt;&lt;/th&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;&lt;input type="password" id="password" name="password" /&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>If there is an error with either field a div will be created (echo form_error) which has a class of "form_error" and has text describing the error.</p>
  
  <p>I want to select the text input if there is an error so that I can highlight by changing the CSS, e.g. changing the colour of the border to red.</p>
  
  <p>This is the jQuery I tried but isn't working:</p>
  
  <pre><code>$(document).ready(function() {
  $("tr:has(.form_error)").next().children("td:input").css("border-color", "#C21312");
  });
  </code></pre>
  
  <p>Any suggestions?</p>