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

你可以试试这个

＆＃13;

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

＆＃13;

.active{
  color : red;
}

＆＃13;

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

＆＃13;

注意：请务必在删除项目之前执行所有操作

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();

});

jQuery - 找到最接近列出项目的兄弟 - 下一个或上一个

3 个答案: