刪除項目時自動單擊項目

Question

我需要在此jQuery函數中添加的內容，當我單擊某個項目並將其刪除時，該功能將自動選擇下一個項目並在卡中顯示其標題和說明。 如果我單擊最后一個項目，則會自動選擇上一個項目，並在卡中顯示其標題和說明

例如，我有10個列表項。 如果單擊第一個項目或第一個和最后一個項目之間的任何項目，則自動選擇已刪除項目的下一個項目；如果單擊列表項目10，則自動選擇列表項目9。

 $("#btndelete").on("click", function() { if ($(".active").length) { $(".active").remove(); var len = $("a").length; if (len == 0) { disabledButtons(true); } else { title.text("List Item none"); description.text("Description none"); } } else { alert("Click an item first!"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 1">List Item 1</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 2">List Item 2</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 3">List Item 3</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 4">List Item 4</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 5">List Item 5</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 6">List Item 6</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 7">List Item 7</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 8">List Item 8</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 9">List Item 9</a> <a href="#" class="list-group-item list-group-item-action list-group-item" data-description="Description 10">List Item 10</a> </div> </div> <div class="col-md-6 col-lg-8"> <div class="card card-primary card-inverse"> <div class="card-block"> <h4 class="card-title"><span class="result"> none</span></h4> <p class="card-description"><span class="result"> none</span></p> </div> </div> <div class="col-md-9"> <button type="button" class="btn btn-primary" id="btnadd">Add</button> <button type="button" class="btn btn-primary" id="btnedit">Edit</button> <button type="button" class="btn btn-danger" id="btndelete">Delete</button> <button type="button" class="btn btn-danger" id="btndeleteall">DeleteAll</button> </div> </div> </div> </div> 

Answer 1

您可以使用JQuery的index（）方法找到活動鏈接的索引：

var myIndex = $('.active').index();

這應該在刪除它之前完成。 然后，您可以使用此索引設置新的活動鏈接，該索引不會更改（其余索引將在刪除索引時向上移動一個索引）。

那應該讓您開始。

編輯：

設置新的活動：

$('a').get(myIndex).addClass('active');

現在，您只需要弄清楚刪除最后一項。