Question

如何在嵌套元素中选择下一个输入？例如：当前选择1a时，按向下箭头键应选择2x，再向下选择3x，依此类推至6x。在另一种情况下，如果当前选择1a，按右箭头键应选择1b。

HTML：

<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='1a' /></div></div>
        <div><div><input value='1b' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='2a' /></div></div>
        <div><div><input value='2b' /></div></div>
    </div>
</div>
<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='3a' /></div></div>
        <div><div><input value='3b' /></div></div>
        <div><div><input value='3c' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='4a' /></div></div>
        <div><div><input value='4b' /></div></div>
    </div>
</div>
<div class='id_group'>
    <div class='id_row'>
        <div><div><input value='5a' /></div></div>
        <div><div><input value='5b' /></div></div>
        <div><div><input value='5c' /></div></div>
    </div>
    <div class='id_row'>
        <div><div><input value='6a' /></div></div>
        <div><div><input value='6b' /></div></div>
    </div>
</div>

jquery的：

$('input').keyup(function(e){
    if(e.which==40)$(this).closest('.id_group, .id_row').next().find('input').focus();
    if(e.which==39)$(this).closest('.id_row').next().find('input').focus();
});

TIA

Answer 1

您可以使用.eq()或.get()。但.get()会在边界周围抛出错误，因此我使用了.eq()

var inputs存储附加了keyup事件的所有元素的引用。它看起来像这样 [input, input, input, input, input, input, input, input, input, input, input, input, input, input]

在inputs.index($(this))中，$（this）指的是您所在的当前元素，.index将从数组中获取当前元素的位置。

var inputs = $('input').keyup(function(e) {
  var index = inputs.index($(this));
  if (e.which == 40) {
    inputs.eq(index + 2).focus();
  }
  if (e.which == 39) {
    inputs.eq(index + 1).focus();
  }
  if (e.which == 38 && index > 0) {
    inputs.eq(index - 1).focus();
  }
});

＆＃13;

var inputs = $('input').keyup(function(e) {
  var index = inputs.index($(this));
  if (e.which == 40) {
    inputs.eq(index + 2).focus();
  }
  if (e.which == 39) {
    inputs.eq(index + 1).focus();
  }
  if (e.which == 38 && index > 0) {
    inputs.eq(index - 1).focus();
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='id_group'>
  <div class='id_row'>
    <div>
      <div>
        <input value='1a' tabindex="1" />
      </div>
    </div>
    <div>
      <div>
        <input value='1b' tabindex="3" />
      </div>
    </div>
  </div>
  <div class='id_row'>
    <div>
      <div>
        <input value='2a' />
      </div>
    </div>
    <div>
      <div>
        <input value='2b' />
      </div>
    </div>
  </div>
</div>
<div class='id_group'>
  <div class='id_row'>
    <div>
      <div>
        <input value='3a' />
      </div>
    </div>
    <div>
      <div>
        <input value='3b' />
      </div>
    </div>
    <div>
      <div>
        <input value='3c' />
      </div>
    </div>
  </div>
  <div class='id_row'>
    <div>
      <div>
        <input value='4a' />
      </div>
    </div>
    <div>
      <div>
        <input value='4b' />
      </div>
    </div>
  </div>
</div>
<div class='id_group'>
  <div class='id_row'>
    <div>
      <div>
        <input value='5a' />
      </div>
    </div>
    <div>
      <div>
        <input value='5b' />
      </div>
    </div>
    <div>
      <div>
        <input value='5c' />
      </div>
    </div>
  </div>
  <div class='id_row'>
    <div>
      <div>
        <input value='6a' />
      </div>
    </div>
    <div>
      <div>
        <input value='6b' />
      </div>
    </div>
  </div>
</div>

＆＃13;

Btw up键是38

希望这有帮助

jQuery选择器嵌套元素的下一个子节点

1 个答案: