jQuery find next element with class

Question

I have a quite simple question, that ate me 4 hours and is not yet solved: How to find next span with specific class with jQuery? I have the following html

<tr>
    <td align="right">Име:&nbsp;</td>
    <td align="left">
         <input type="text" value="<?=$profileSQL['user_name']; ?>" name="user_name" class="input required" />
    </td>
</tr>
<tr>
    <td align="right" colspan="2">
         <span class="error"></span>
    </td>
</tr>

and I validate it with jQuery. I want if there's an error message, generated with js (just a string), jQuery to find nearest span with class .error and to text() the message in there. I tried with nextAll(), next("span.error") and a lot of other things, but nothing helped me.

Thanks in advance!

Solution 1

I know this may not be exactly what you're looking for, but if you've GOT the input, like this:

var input = $('input[name="user_name"]');

Then you can just do:

input.parents('tr').eq(0).next().find('.error').text(nameErrEmptyMsg);

Solution 2

the problem is that .next() and .nextAll() only search through through the siblings (elements that have the same parent).

From jQuery documentation:

Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

In your case you have:

  <tr> 
     <td> title here</td> 
     <td><input name="user_name"/> </td>
   </tr>
   <tr>
     <td colspan="2">
       <span class="error"></span>
     </td> 
   </tr>

As i understand your JQuery code is run on the input, right? In this case before calling newxt() or nextAll() you should first go up 2 levels, until the and afterwards select the next because there is the that you want to find, so:

here's a working example to check it: http://jsfiddle.net/EM5Gw/