Jquery -查找已知元素后的下一个input:text元素

bvpmtnay  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(202)

我有一个<tr id="tagTR">的id鉴于上述情况,是否有可能找到下一个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>
qxsslcnc

qxsslcnc1#

我觉得这个问题很有意思。似乎其他人正在阅读这篇文章,在兄弟姐妹中找到下一个输入。但我把它读成-无论如何都要给我找到下一个输入。我不知道是兄弟姐妹,父母还是父母的兄弟姐妹。这是我根据这个问题得到的反馈得出的结论。
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()));
}
bwleehnv

bwleehnv2#

查看:moved this into a more complete question and answer

基于@mrtsherman的awesome answer,我写了这个更完整的解决方案:

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

如果我知道我的代码已经正确优化,并且T谢尔曼先生同意的话,我会在jQuery lib上使用submit a PR,这意味着我认为这应该是jQuery的核心方法!:P

p5fdfcr1

p5fdfcr13#

@Cawas - nice solution,但我建议不要过度使用,因为$('*')很贵;- )
不管怎样,我根据自己的需要扩展了它:

(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,如果它匹配选择器本身,则返回自身。如果您不知道调用的是哪个元素,并且您要搜索的正是它本身,那么这很有用。

m2xkgtsf

m2xkgtsf4#

TR's之间不能有div标记。它不是有效的标记。
要从引用的tr中找到input元素,可以尝试这样做。

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

7eumitmz5#

你可以使用“next”:

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

相关问题