下一个最接近的元素jQuery

时间:2015-09-26 17:03:00

标签: jquery html

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]

2 个答案:

答案 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的元素。在以下代码中 - 我按以下方式检查

  1. 是否提交当前元素的类型。如果是 - 那么结束循环并返回当前元素。
  2. 查找当前元素的任何子元素。
  3. 寻找下一个兄弟姐妹和他们的孩子
  4. 寻找父母及其兄弟姐妹及其子女
  5. 我们将以递归方式为每个元素调用函数,直到找到我们要查找的内容

    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链接的工作示例。