add / remove a class inside previous or next parent

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

So I want to add/remove .pmarked class to .postitle (not to .title ) by pressing arrow-up and arrow-down on keyboard.

The above code works fine but only if prev/next item is inside the same .part div.

How to jump on previous or next .part div?

Answer 1

try this,the way you select the element have to change

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

i got the present element index by

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

and calc the previous element index by index-1 and next element index by index > total - 2 ? 0 : index + 1 index > total - 2 ? 0 : index + 1