jquery - 如何用jQuery遍历其他父母？

Question

我在一个网站上有很多表单，我想使用 jQuery 来横向，这样当你按下PgUp/PgDn时它会转到下一个<textarea>字段。当他们是兄弟姐妹时，我得到了它<textarea>，但如果他们是单独的形式（与不同的父母），我无法弄清楚。

HTML就像：

<form action="#" method="post">
    <textarea id="numOne" name="numOne" class="num" ></textarea>
</form>
<form action="#" method="post">
    <textarea id="numtwo" name="numtwo" class="num" ></textarea>    
</form>
<form action="#" method="post">
    <textarea id="numthree" name="numthree" class="num" ></textarea>    
</form>

这在他们是兄弟姐妹时有效：

$('.num').keydown(function (e) {

    if (e.which == 34) {

        $(this).next().focus();

        e.preventDefault();
        return false;
    } 
    if (e.which == 33) {
        $(this).prev().focus();

        e.preventDefault();
        return false;
    }


});

Answer 1

您应该使用元素集合来获取下一个和上一个元素，这样 DOM 结构无关紧要，您可以随意嵌套元素：

var elems = $('.num');

elems.on('keydown', function (e) {
    var n = e.which === 34 ? 1 : e.which === 33 ? -1 : 0,
        next = elems.eq(elems.index(this) + (n));

    if (n) {
        e.preventDefault();
        next.length ? next.focus() : elems.first().focus();
    }
});

小提琴

Answer 2

现场演示

$('.num').keydown(function (e) {

    if (e.which == 34) {
        $(this).closest('form').next('form').find('.num').focus();
        return false;
    } 
    if (e.which == 33) {
        $(this).closest('form').prev('form').find('.num').focus();
        return false;
    }

});

_{正如你所看到的，我使用.closest('form')它会让你有朝一日在不关心 jQuerytextarea的情况下使用你的内部fieldset，因为它总是以正确的方式遍历 DOM。}

另一个不错的方法：DEMO

$('.num').keydown(function (e) {
    var k = e.which;  
    if ( k==34 || k==33 ){
      $(this).closest('form')[k==34?'next':'prev']('form').find('.num').focus();
      e.preventDefault();
    }    
});

另一个不错的DEMO

var $num = $('.num').keydown(function(e) {
    var k=e.which, c=$num.index(this);  
    if(k==34||k==33) $num[k==34?++c:--c].focus();
});

_{让我们看一下最后一个：}

var $num = $('.num')              // Create a jQuery Array collection
                                  // of all the .num in the DOM.
    .keydown(function(e) {        // On keydown pass the (e)vent.
        var k=e.which,            // Var k is now the "which keyCode"
            c=$num.index(this);   // Var c will be the index of the clicked
                                  // element taken from the collection.
        if(k==34||k==33)          // Only IF pgUp/pgDn
        $num[k==34?++c:--c]       // increment or decrement c and get that el.
                                  // out of the array ( e.g: $num[1] )
        .focus();                 // and set focus to it.
}); 

Answer 3

您可以使用.indexand.eq在选择器上执行下一个/上一个搜索。在这种情况下，我们查看页面上的所有文本区域，并找出我们当前所在的区域，例如第 22 个文本区域。然后我们要么选择第 21 个或第 23 个文本区域，然后聚焦它。

这比其他依赖 DOM 结构的解决方案更健壮。这仅仅依赖于 DOM 顺序。它可以通过更改范围是您希望查看的最高父级$('textarea')来进一步细化。$('#scope textarea')

如果您的 HTML 将发生变化（新的或删除textarea的），那么不要像我一样缓存结果。但是，如果您的 HTML 在该区域不发生变化，它会提高性能。

var $textareas = $('textarea');

$('.num').keydown(function (e) {
    if (e.which == 34) {

        var index = $textareas.index(this)
        $textareas.eq(index + 1).focus();

        e.preventDefault();
        return false;
    }

    if (e.which == 33) {
        var index = $textareas.index(this)
        $textareas.eq(index - 1).focus();

        e.preventDefault();
        return false;
    }
});

小提琴