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

Question

如何select在嵌套元素中输入下一个？例如：当前 selecting 1a 时，按下方向键应 select 2x，再次向下应 select 3x，依此类推直至 6x。在另一种情况下，如果当前 selecting 1a，按右箭头键应该 select 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() or .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();
  }
});

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

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

顺便提一句，关键是 38

希望这对您有所帮助

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

jQuery selector next child of nested elements

html

javascript

jquery

jquery-selectors

twitter-bootstrap