jQuery

Question

我有一个功能，可以在单击按钮时删除带有活动 class 的 li。当活动的 li 被移除时，我需要将活动的 class 转移到最近的 li。 .next 和 .prev 都很好，但如果我要删除第一个或最后一个 li，请不要考虑。在这种情况下，.next 或 .prev 将不起作用。

除了使用 if 语句之外，我还可以在这里使用其他功能吗？不幸的是，closest 对我不起作用。

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>

Note: be sure to make all actions before you remove the item

Answer 2

当您尝试将活动 class 添加到最接近的 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();

});

jQuery - 查找最接近列表项的兄弟 - 下一个或上一个

jQuery - Find closest sibling to list item - next or previous

closest