如何找到元素的第一個祖先的兄弟是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/