<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)的祖先,它的前一个兄弟元素是"input"。这里的答案是span与id"ending_point",因为它的前兄弟是"输入"。如何找到它?
您可以使用.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>
我的解决方案是:
$("input + span").first();
这是选择器:$("input + span")
。它选择在输入之后紧跟着的所有跨度。使用.first()选择第一个。
我为你创建了一个JSFiddle。
这里是selector Reference
Greetz Eldo.ob
如果事先知道层次结构,那么我会使用
$( "#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/