jQuery - 查找最接近的同胞列表項 - 下一個或上一個

我有一個函數，刪除一個按鈕單擊活動類li。當活動li被刪除時，我需要將活動類轉移到最近的li。 .next和.prev都可以很好地工作，但是如果我刪除第一個或最後一個li，則不會考慮。在這種情況下，.next或.prev都不起作用。jQuery - 查找最接近的同胞列表項 - 下一個或上一個

除了使用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>

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

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

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

});

來源

2016-05-16 Clinton Green

你可以試試這個

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

注：務必使所有的行動當您嘗試活動類添加到最近li你刪除的項

來源

2016-05-17 00:08:06

感謝隊友，這很好。我希望有一種方法可以在沒有if語句的情況下做到，但如果這是我唯一的出路。 –

@ClintonGreen我認爲沒有辦法不使用if語句來檢查最後一個元素，甚至是第一個元素..我會試着去考慮它..但我有點確定它沒有辦法 –

是的，我嘗試使用li：first-of-type來嘗試使用If語句執行此操作，但無法弄清楚爲什麼它會刪除選定的和下一個。這是因爲我在刪除另一個之前將活動課寫入另一個課。您的.toDelete課程節省了一天的時間。謝謝 –

之前，你的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(); 

});

來源

2016-05-17 00:13:50 SimianAngel

對不起，隊友不起作用，它似乎做我的確如此。 –

這是我最終選擇的解決方案。感謝@ 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(); 

});

來源

2016-05-17 00:55:51

jQuery - 查找最接近的同胞列表項 - 下一個或上一個

回答

相關問題