HTML:
<a class="button">Button</a>
<input type="submit" />
<a class="button">Button</a>
<div>
<!-- The input there can be into an another `div`, etc .. -->
<input type="submit" />
</div>
当我点击包含课程button
的链接时,我如何定位下一个最接近的 input[type=submit]
?
答案 0 :(得分:0)
我刚刚想到的一个方法实际上非常简单,但需要知道包含所有<a>
和<input>
的顶级父级,或者向input
添加一个类的
您只创建了<a>
和type=submit
所涉及的集合。
当点击<a>
时,你在前一个集合中使用它的索引来过滤掉它索引后的所有输入并取出第一个
var $buttons = $('#mainContainer').find('a.button, input[type=submit]');
$('#mainContainer a.button').click(function(){
var index = $buttons.index(this);
var $input = $buttons.filter('input:gt(' + index +')').first();
});
答案 1 :(得分:0)
我们需要遍历DOM以找到其类型为submit的元素。在以下代码中 - 我按以下方式检查
我们将以递归方式为每个元素调用函数,直到找到我们要查找的内容
function findButton(ctrl, skipChildren) {
var controlToReturn = null;
if ($(ctrl).prop('type') === 'submit') {
controlToReturn = $(ctrl);
} else {
//We need to skip children in case the call is coming from the child (else we will be stuck in infinite loop)
if(!skipChildren){
$(ctrl).children().each(function () {
controlToReturn = findButton($(this));
if (controlToReturn != null) {
return false; //break
}
});
}
if (controlToReturn === null || controlToReturn === undefined) {
//Loop through the next siblings
$(ctrl).nextAll().each(function () {
controlToReturn = findButton($(this));
if (controlToReturn != null) {
return false; //break
}
});
}
if (controlToReturn === null || controlToReturn === undefined) {
//Go to parent and find the element in parents siblings. Note we are passing true as second parameter of this function.
$(ctrl).parents().each(function(){
controlToReturn = findButton($(this), true);
if (controlToReturn != null) {
return false; //break
}
});
}
}
return controlToReturn;
}
请参阅this链接的工作示例。