jQuery - Найти ближайшего родственника к элементу списка - следующий или предыдущий

Question

У меня есть функция, которая удаляет li с активным классом при нажатии кнопки. Когда активный li удаляется, мне нужно перенести активный класс на ближайший li. Оба .next и .prev отлично работают, но не принимают во внимание, если я удаляю первый или последний li. В этом случае либо .next, либо .prev не будет работать.

Есть ли другая функция, которую я могу использовать здесь, используя инструкцию if? К сожалению, ближайший не работал для меня.

HTML

<ul> 
<li class="active">List item #1</li> 
<li>List item #2</li> 
<li>List item #3</li> 
<li>List item #4</li> 
<li>List item #5</li> 
</ul> 

JS

$('.conversations-wrap').on('click', '.delete-message', function(){ 

    // delete sidebar element 
    $('.message-details.active').remove(); 

    // change sidebar active 
    $('.message-details.active').closest('li').addClass('active'); 

}); 

Answer 1

вы можете попробовать это

$(document).on('click', '.delete-message', function(){ 
 
    //add a fake class to the li you need to remove 
 
    $('ul > li.active').addClass('toDelete'); 
 
    //check if the active li is the last one in the list or not 
 
    //if it is a last one add the class active to previous li 
 
    if($('ul > li.toDelete').index() == $('ul > li').length - 1){ 
 
    $('ul > li.toDelete').prev('li').addClass('active'); 
 
    }else{ // if not the last add the class active to the next li 
 
    $('ul > li.toDelete').next('li').addClass('active'); 
 
    } 
 
    // remove sidebar element 
 
    $('ul > li.toDelete').remove(); 
 
});

.active{ 
 
    color : red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
<li>List item #1</li> 
 
<li>List item #2</li> 
 
<li>List item #3</li> 
 
<li>List item #4</li> 
 
<li class="active">List item #5</li> 
 
</ul> 
 

 
<button class="delete-message">Delete Active li</button>

Примечание: быть уверены, чтобы сделать все действия, прежде чем удалить элемент

Answer 2

При попытке добавить активный класс к ближайшему li, ваш селектор JQuery не будет найдено ни одного совпадения. Это связано с тем, что вы удалили соответствующий элемент в предыдущей строке кода. Попробуйте сохранить текущий активный элемент в переменной, изменив активный элемент боковой панели и затем удалив элемент.

$('.conversations-wrap').on('click', '.delete-message', function(){ 

    // Get the current active element. 
    var currentActive = $('.message-details.active'); 

    // Change the active sidebar element. 
    currentActive.closest('li').addClass('active'); 

    // Delete the current sidebar element. 
    currentActive.remove(); 

}); 

Answer 3

Вот решение, с которым я столкнулся. Спасибо @ Mohamed-Yousef за то, что указал мне в правильном направлении.

$('.conversations-wrap').on('click', '.delete-message', function(){ 

    // replace active class, otherwise we have two active classes later on 
    $('.message-details.active').removeClass('active').addClass('toRemove'); 

    // change active class to closest li 
    if ($('.message-inbox ul li:first-of-type').hasClass('toRemove')) { 
    $('.message-details.toRemove').next('li').addClass('active'); 
    } else { 
    $('.message-details.toRemove').prev('li').addClass('active'); 
    } 

// delete sidebar element 
    $('.message-details.toRemove').fadeOut(300, function() { $(this).remove(); 

});