如何找到元素的第一个祖先的兄弟是jQuery中的特定元素？

Question

<div> 
    <input type="text"> 
    <span id="ending_point"> 
    <label> 
     <span> 
     <input type="text" id="starting_point"> 
      <span> 
      </span> 
     </span> 
    </label> 
    </span> 
</div> 

在这里，我想找到其先前的兄弟是“输入”的元素（这里是id：starting_point）的祖先。这里的答案是跨越id“ending_point”，因为它的前一个兄弟是“输入”.How找到这个？

Answer 1

您可以使用.parents和.filter组合：如果您知道究竟层次

var $ep = $("#starting_point") 
 
    .parents() 
 
    .filter(function() { 
 
    return $(this).prev().is("input"); 
 
    }) 
 
    .first(); 
 

 
// NB: the parents() method return all parents, CLOSEST ONE FIRST 
 

 
console.log($ep);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div> 
 
    <input type="text"> 
 
    <span id="ending_point"> 
 
    <label> 
 
     <span> 
 
     <input type="text" id="starting_point"> 
 
     <span></span> 
 
     </span> 
 
    </label> 
 
    </span> 
 
</div>

Answer 2

这里是我的解决方案：

$("input + span").first(); 

这是你的选择：$("input + span")。它会在输入后选择所有跨度。用.first（）选择第一个。我为你创建了一个JSFiddle。

这里是Selectors Reference

格尔茨Eldo.ob

Answer 3

事先，那么我会用

$("#starting_point").parent().parent().parent().parent().find("#ending_point"); 

或者用.parentsUntil（）（https://api.jquery.com/parentsUntil/）做点什么。 （好的，不是一个漂亮的解决方案，但肯定有效。）

如果您不知道层次结构（它是动态创建的），但您确定，该#starting_point比#ending_point“低”，那么您可以创建一个递归函数，检查你正在寻找的类型的每个级别。在函数中使用

// start_obj is the jQuery object you start your recursive function from 
// end_type is the type of element you are looking for in the hierarchy (e.g. input[ type="text" ] in your case 

function get_sibling_on_other_level(start_obj, end_type) { 
    var grampy = start_obj.parent().parent(); 
    if (grampy.find(end_type).length > 0) { 
     return grampy.children(end_type); 
    } else { 
     // start the iteration "one level higher" 
     // actually you should stop at "body" level - if you did not find 
     // what you were looking for, then it's not in that branch of hierarchy 
     get_sibling_on_other_level(start_obj.parent(), end_type); 
    } 
} 

其他jQuery的方法：https://api.jquery.com/children/