Question

<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

JS

$(document).keydown(function(e){
    total = $('.postitle').length;
    if (e.keyCode == 38 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() > 0) {
        e.preventDefault();
        listup();
    }
    else if (e.keyCode == 40 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() <= total-2) {
        e.preventDefault();
        listdown();
    }
});

function listup(){
    var prev = $('.pmarked').prevAll('.postitle:first');
    $('.pmarked').removeClass('pmarked');
    prev.addClass('pmarked');
}

function listdown(){
    var next = $('.pmarked').nextAll('.postitle:first');
    $('.pmarked').removeClass('pmarked');
    next.addClass('pmarked');
}

所以我想通过在键盘上按.pmarked和.postitle将.title课程添加/移至arrow-up（而不是arrow-down）。

上述代码工作正常但仅当prev/next项位于同一.part div内时。

如何跳转上一个或下一个.part div？

Answer 1

试试这个，你选择元素的方式必须改变

$(document).keydown(function(e) {
  let index = $('.postitle').toArray().indexOf($('.pmarked')[0]);
  total = $('.postitle').length;
  if (e.keyCode == 38 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() > 0) {
    e.preventDefault();
    listup(index - 1);
  } else if (e.keyCode == 40 && $('.postitle').hasClass('pmarked') && $('.pmarked').index() <= total - 2) {
    e.preventDefault();
    listdown(index > total - 2 ? 0 : index + 1);
  }
});

function listup(index) {
  var prev = $('.postitle').eq(index);
  $('.pmarked').removeClass('pmarked');
  prev.addClass('pmarked');
}

function listdown(index) {
  var next = $('.postitle').eq(index);
  $('.pmarked').removeClass('pmarked');
  next.addClass('pmarked');
}

.pmarked {
  background:pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

<div class='part'>
<div class='title'>title</div>
<div class='postitle pmarked'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

<div class='part'>
<div class='title'>title</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
<div class='postitle'>323</div>
</div>

我通过

获得了现在的元素索引

  let index = $('.postitle').toArray().indexOf($('.pmarked')[0]);

并将前一个元素索引计算为index-1，将下一个元素索引计算为index > total - 2 ? 0 : index + 1

在上一个或下一个父级中添加/删除一个类

1 个答案: