Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 691
user1006072 Avatar asked Jan 17 '12 21:01

user1006072


2 Answers

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()));
}
like image 66
mrtsherman Avatar answered Sep 20 '22 03:09

mrtsherman


Check it out: moved this into a more complete question and answer

Based on the awesome answer by @mrtsherman, I wrote this more complete solution:

(function( $ ){
 $.fn.findNext = function(sel) {
   var $result = $(sel).first();
   if ($result.length <= 0) {
     return $result;
   }
   $result = [];
   var thisIndex = $('*').index($(this));
   var selIndex = Number.MAX_VALUE; // Number.MAX_SAFE_INTEGER is not yet fully supported
   $(sel).each(function(i,val){
     var valIndex = $('*').index($(val));
     if (thisIndex < valIndex && valIndex < selIndex) {
       selIndex = valIndex;
       $result = $(val);
     }
   });
   return $result;
 }; 
})( jQuery );

Then you can use it as this:

$('#tagTR').findNext('input');

I would submit a PR for this on jQuery lib if I knew my code was properly optimized and if it was okay by Mr T Sherman there, meaning I think this should be a core method on jQuery! :P

like image 29
cregox Avatar answered Sep 21 '22 03:09

cregox