在上一個或下一個父級中添加/刪除類

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-up和arrow-down arrow-up將.pmarked類添加/刪除到.postitle （而不是.title ）。

上面的代碼可以正常工作，但.part是上一個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計算下一個元素索引index > total - 2 ? 0 : index + 1 index > total - 2 ? 0 : index + 1