如何使用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;
    }


});

- kevmor

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();
    }
});

FIDDLE

- adeneo

---

我们想得一样 :-) 顺便说一下，JSFiddle有一个非常好的TidyUp按钮，可以修复间距等问题。如果我没有点击它，你可能不会喜欢看到我的答案。 - Brigand

@FakeRainBrigand - 谢谢，我也给你点了个赞，因为这基本上是相同的原理。 - adeneo

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')，它将允许您在一天之内使用fieldset中的textarea而不必担心jQuery，因为它始终会正确遍历DOM。

另一个不错的方法：演示。

$('.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.
}); 

- Roko C. Buljan

---

谢谢，我更喜欢你更新的版本。我想我卡在了指定要遍历的下一个表单上。 - kevmor

Answer 3

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

这比其他依赖于DOM结构的解决方案更健壮。这仅依赖于DOM顺序。如果将$('textarea')更改为$('#scope textarea')，其中scope是您希望查看其内部的最高父级，则可以进一步完善此方法。

如果您的HTML将发生更改（新增或删除文本区域），则不要像我一样缓存结果。但是，如果您的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;
    }
});

{{链接1：fiddle}}

- Brigand