fiddle

Question

我在网站上有很多表单，我想使用jQuery进行横向处理，这样当你按 PgUp / PgDn 时，它会转到下一个{{ 1}}字段。当<textarea>是兄弟姐妹的时候我开始工作了，但是如果它们是一个单独的形式（有不同的父母），我就无法理解。

HTML就像：

<textarea>

当他们是兄弟姐妹时，这很有用：

<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>

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

Answer 2

<强> LIVE DEMO

$('.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')它可以让您有一天在textarea内使用fieldset而无需处理jQuery，因为它总是以正确的方式遍历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

您可以使用.index和.eq在选择器上执行next / prev搜索。在这种情况下，我们会查看页面上的所有textareas，并找出我们目前所处的那个，比如22nd textarea。然后我们要么选择第21或第23个textarea，要关注它。

这比依赖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;
    }
});

如何使用jQuery遍历其他父母？

3 个答案:

fiddle