jquery 前一个元素有几个类

Question

我得到了 table 的结构：

<tr class="dossier">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail alert">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="dossier">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="even dossier">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail">
  <td>...</td>
  <td>...</td>
</tr>
<tr class="detail alert">
  <td>...</td>
  <td>...</td>
</tr>

当 tr 元素有 alert class 时，我必须将 alert class 添加到具有 dossier class 的前一个元素.

我试试这个代码：

$("tr.alert").prev("tr.dossier").addClass("alert");

这仅适用于 <tr class="dossier"> 个元素。它不适用于<tr class="even dossier"> 元素。

有人有办法做到这一点吗？

Answer 1

使用prevAll()

$($("tr.alert").prevAll("tr.dossier")[0]).addClass("alert");

.alert{
font-weight: bold;
color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<table>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="even dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Answer 2

您可以遍历 tr 个元素并检查是否有 class alert。然后您可以检查具有 class dossier 的先前元素并将 class alert 添加到该元素：

$("table tr").each(function() {
  if ($(this).hasClass("alert")) {
    $(this).prevAll("tr.dossier").first().addClass("alert");
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="even dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
</table>

Answer 3

下面的解释是在我的答案末尾的示例代码的上下文中。

首先，由于您有多个 tr.alert，因此您需要使用 .each()，因为您希望将 class 添加到最接近的 tr.dossier每个 tr.alert 但保持中间 tr.dossier 不变。

使用 $("tr.alert").prev("tr.dossier") 将仅 return 紧接在前的元素，并且仅当该元素是 tr 和 class dossier 时才如此。如果你想要一个通过 DOM 更远的元素，你将需要使用 $("tr.alert").prevAll("tr.dossier")。

然而，简单地使用 $("tr.alert").prevAll("tr.dossier") 将 return 所有先前的 tr 与每个 tr.alert 的 class dossier，然后合并它们合并为一个集合。在您的 DOM jQuery 的情况下，您的第一个 tr.alert 将 return 第一个 tr.dossier 和最后一个的所有三个。然后，这四个结果将减少为 DOM 中可用的三个实际项目。

从那里您可以使用 .first() 或 .last() 到 select 单个项目但它只会 select 在您的第一个或最后一个 tr.alert 之前的 tr.dossier 并且不会同时应用于两者（看起来您需要）。使用 .each() 将允许您单独处理每个 tr.alert 并找到最近的 tr.dossier。

在此示例中，具有 class dossier 的行具有绿色背景，具有 alert 的行的字体大小设置为 50px.

$("tr.alert").each(function(index, me) {
  $(me).prevAll("tr.dossier").first().addClass("alert");
});

tr.alert {
  font-size: 50px;
}
tr.dossier {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="even dossier">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail">
    <td>...</td>
    <td>...</td>
  </tr>
  <tr class="detail alert">
    <td>...</td>
    <td>...</td>
  </tr>
</table>

jquery 前一个元素有几个类

jquery previous element with several classes

jquery

jquery-selectors

jquery 前一个元素有几个 类

jquery previous element with several classes

jquery

jquery-selectors

jquery 前一个元素有几个类