Jquery - найти следующий элемент input: text после известного элемента

Question

У меня есть идентификатор для <tr id="tagTR">. Учитывая вышесказанное, можно ли найти следующий элемент input:text независимо от любой другой разметки между ними.Есть ли селектор jQuery, который я могу использовать для этого сценария?

Например:

<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>

Answer 1

Я думал, что этот вопрос был очень интересным.Кажется, другие читают это как, найти следующий вход среди братьев и сестер.Но я читаю это как - найди мне следующий вход, несмотря ни на что.Я не знаю, в брате ли это, родителя или родителя.Это то, что я придумал, основываясь на отзывах, которые я получил от на этот вопрос .

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

Answer 2

Проверьте это: перенес это в более полный вопрос и ответ

На основе удивительного ответа от @ mrtsherman , Iнаписал это более полное решение:

(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 );

Тогда вы можете использовать его так:

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

Я бы представил PR для этого на jQuery lib, если бы язнал, что мой код был должным образом оптимизирован, и если мистер Т Шерман согласился, то это означает Я думаю, что это должен быть основной метод в jQuery !: P

Answer 3

@ Cawas - хорошее решение , но я предлагаю использовать его не чрезмерно, потому что $('*') дорого; -)

Независимо от этого,Я расширил его для своих нужд:

(function( $ ){
     $.fn.findNextOverall = function(sel, returnItselfIfMatched) {

       if(returnItselfIfMatched && $(this).is(sel)) return $(this);

       var $result = $(sel).first();
       if ($result.length <= 0) {
         return $result;
       }
       $result = [];
       var thisIndex = $('*').index($(this));
       var selIndex = Number.MAX_SAFE_INTEGER;
       $(sel).each(function(i,val){
         var valIndex = $('*').index($(val));
         if (thisIndex < valIndex && valIndex < selIndex) {
           selIndex = valIndex;
           $result = $(val);
         }
       });
       return $result;
     }; 
    })( jQuery );

Так что, если returnItselfIfMatched установлено true, оно возвращает себя, если оно соответствует самому селектору.Полезно, если вы не знаете, какой элемент вызывает, и вы ищете именно себя.

Answer 4

Вы не можете иметь тег div между TR's.Это недопустимая разметка.

Чтобы найти элемент input из указанного tr, вы можете попробовать это.

$('#tagTR').nextAll().filter(function(){
    return $(this).find('input:text').length > 1;
}).find('input');

Answer 5

Вы можете использовать «следующий»:

$("#tagTR").next("input")