jQuery Siblings Selector无法处理按钮

Question

var buttons = document.querySelectorAll("button");

$(".list").on("click", "button", function() {
  $(this).toggleClass("select");
  $(this).siblings(".add").toggleClass("exclude");
});

.select {
  background: purple;
  color: white;
}

.list {
  height: 200px;
}

.exclude {
  background: grey;
  color: grey;
  text-decoration: line-through;
}

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list">
  <div><input type="text" placeholder="Add New Events"></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Eat</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Workout</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Sleep</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Laundry</button></div>
  <div><button class="add"><span><i class="fa fa-trash"></i></span>Study</button></div>
</div>

我想要做的是，我想让每个按钮能够将一个类列表切换到自己，并在单击时将另一个类列表切换到其他按钮。因此，我试图使用兄弟选择器选择其他按钮，但它不起作用。有人可以告诉我为什么并帮助我解决它吗？

Answer 1

<button>s不是彼此的直接兄弟姐妹。他们每个都包裹在<div>。因此，您需要的代码将是类似的

$(this).parent().siblings().children(".add").toggleClass("exclude");