Search code examples
jqueryinputjquery-selectorselement

Jquery - find the next input:text element after a known element


I have an id for a <tr id="tagTR"> Given the above, is it possible to find the next input:text element regardless of any other mark up in between . Is there a jQuery selector that I can use for this scenario?

For example :

<tr id="tagTR"> 
</tr>
<tr id="tagRed"> 

  <td> </td>
</tr>
<div>
 <tr>
   <td>
     <input> // This is what I want to get to. 
   </td>
 </tr>
</div>

Solution

  • I thought this question was very interesting. It seems others are reading this as, find the next input among siblings. But I read it as - find me the next input no matter what. I don't know if its in a sibling, a parent or a parent's sibling. This is what I came up with based on feedback I received from this question.

    http://jsfiddle.net/GesSj/1

    //assume you know where you are starting from
    var $startElement = $('#foo');
    
    //get all text inputs
    var $inputs = $('input[type=text]');
    
    //search inputs for one that comes after starting element
    for (var i = 0; i < $inputs.length; i++) {
        if (isAfter($inputs[i], $startElement)) {
            var nextInput = $inputs[i];
            alert($(nextInput).val());
        }
    }
    
    //is element before or after
    function isAfter(elA, elB) {
        return ($('*').index($(elA).last()) > $('*').index($(elB).first()));
    }