javascript - 添加/删除上一个或下一个父级中的类

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

所以我想通过按 arrow- 将 .pmarked 类添加/删除 .postitle (而不是 .title)键盘上的向上 和向下箭头。

上面的代码工作正常，但前提是 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:索引+1