jQuery - Finde nächsten Geschwister zum Listenelement - nächste oder vorherige

Question

Ich habe eine Funktion, die eine li mit einer aktiven Klasse auf einen Klick auf die Schaltfläche entfernt. Wenn der aktive Li entfernt wird, muss ich die aktive Klasse auf den nächsten li übertragen. Sowohl .next als auch .prev funktionieren gut, berücksichtigen aber nicht, wenn ich den ersten oder letzten li entferne. In diesem Fall wird .next oder .prev nicht funktionieren.

Gibt es eine andere Funktion, die ich hier neben einer if-Anweisung verwenden kann? Leider hat das engste für mich nicht funktioniert.

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

können Sie versuchen, diese

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

Hinweis: sicher sein, alle Aktionen zu machen, bevor Sie den Artikel entfernen

Answer 2

Wenn Sie versuchen, die aktive Klasse auf die nächsten li, Ihr jQuery-Selektor findet keine passenden Ergebnisse zu addieren. Dies liegt daran, dass Sie das übereinstimmende Element in der vorherigen Codezeile entfernt haben. Versuchen Sie, das aktuelle aktive Element für eine Variable beizubehalten, das aktive Seitenleistenelement zu ändern und anschließend das Element zu löschen.

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

Hier ist die Lösung, mit der ich endete. Danke @ Mohamed-Yousef dafür, dass er mich in die richtige Richtung weist.

$('.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(); 

});