javascript - next() 和 siblings() 找不到按钮

Question

我想更改同一行中每个按钮元素的背景颜色。我试过使用 jQuery siblings() 和 next() 函数，但它返回了 same(而不是按钮，它返回了另一个元素使用 accordion-nested-header 类):

我想要的结果是这样的:

如果用户将鼠标悬停在“gyvulių”、“fermų”或“fabrikų”上，就会发生这种情况。它应该将该行的背景颜色更改为所有按钮。

$('.accordion-nested-header').next().hover(function() {
  $(this).next('button').css('background', 'red');
}, function() {
  $(this).next('button').css('background', '');
});

div.accordion-header {
  border: 1px solid #1e5d86;
  background: #f7ba01;
  color: #fff;
  padding: 4px;
  outline: none;
  font-size: 15px;
  font-family: sans-serif;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

.accordion,
.accordion-nested,
.accordion-nested-parent {
  border: 1px solid #1e5d86;
  border-top: none;
  background: #21aedb;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  outline: none;
  font-size: 14px;
  text-align: center;
}

.accordion.active,
.accordion-nested.active,
.accordion-nested:hover,
.accordion-nested-parent.active,
.accordion-nested-parent:hover,
.accordion:hover {
  background: #0E82A7;
}

.accordion:after,
.accordion-nested:after,
.accordion-nested-parent:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
}

button.accordion.active,
.accordion-nested.active,
.accordion-nested-parent.active {
  border-bottom: none;
}

button.accordion.active:after,
.accordion-nested.active:after,
.accordion-nested-parent.active:after {
  content: "\2212";
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 3px;
  color: #fff;
  background: #f7ba01;
  vertical-align: middle;
}

tr {
  border: 1px solid #1e5d86;
}

td {
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 2px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  background: #21aedb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="accordion-nested-header" style="border: none;">
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Gyvulių (5%)</button>
    </td>
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Fermų (10%)</button>
    </td>
    <td style="vertical-align: top; padding: 0; ">
      <button style="border-right: none; " class="accordion-nested top-border ">Fabrikų (10%)</button>
    </td>
  </tr>
  <tr class="accordion-nested-header" style="border: none;">
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Gyvulių (5%)</button>
    </td>
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Fermų (10%)</button>
    </td>
    <td style="vertical-align: top; padding: 0; ">
      <button style="border-right: none; " class="accordion-nested top-border ">Fabrikų (10%)</button>
    </td>
  </tr>

Answer 1

$('.accordion-nested-header').hover(function() {
  $(this).find('button').css('background', 'red');
}, function() {
  $(this).find('button').css('background', '');
});

div.accordion-header {
  border: 1px solid #1e5d86;
  background: #f7ba01;
  color: #fff;
  padding: 4px;
  outline: none;
  font-size: 15px;
  font-family: sans-serif;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

.accordion,
.accordion-nested,
.accordion-nested-parent {
  border: 1px solid #1e5d86;
  border-top: none;
  background: #21aedb;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  width: 100%;
  outline: none;
  font-size: 14px;
  text-align: center;
}

.accordion.active,
.accordion-nested.active,
.accordion-nested:hover,
.accordion-nested-parent.active,
.accordion-nested-parent:hover,
.accordion:hover {
  background: #0E82A7;
}

.accordion:after,
.accordion-nested:after,
.accordion-nested-parent:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  float: right;
}

button.accordion.active,
.accordion-nested.active,
.accordion-nested-parent.active {
  border-bottom: none;
}

button.accordion.active:after,
.accordion-nested.active:after,
.accordion-nested-parent.active:after {
  content: "\2212";
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 3px;
  color: #fff;
  background: #f7ba01;
  vertical-align: middle;
}

tr {
  border: 1px solid #1e5d86;
}

td {
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 2px;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  background: #21aedb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="accordion-nested-header" style="border: none;">
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Gyvulių (5%)</button>
    </td>
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Fermų (10%)</button>
    </td>
    <td style="vertical-align: top; padding: 0; ">
      <button style="border-right: none; " class="accordion-nested top-border ">Fabrikų (10%)</button>
    </td>
  </tr>
  <tr class="accordion-nested-header" style="border: none;">
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Gyvulių (5%)</button>
    </td>
    <td style="vertical-align: top; padding: 0;">
      <button style="border-right: none;" class="accordion-nested top-border">Fermų (10%)</button>
    </td>
    <td style="vertical-align: top; padding: 0; ">
      <button style="border-right: none; " class="accordion-nested top-border ">Fabrikų (10%)</button>
    </td>
  </tr>

1. 删除下一个，因为您要更改子元素。
2. 使用 find 获取悬停 tr 中的按钮