jquery前面有几个类的元素

Question

我得到了这种表结构：

<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类时，我必须将alert类添加到具有dossier类的前一个元素。

我试试这段代码：

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

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

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

Answer 1

您可以遍历tr元素并检查是否有类alert。然后，您可以检查以前具有类dossier的元素，并将类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 2

以下说明是在我的答案结尾处的示例代码的上下文中。

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

使用$("tr.alert").prev("tr.dossier")只会返回前一个元素，并且只有当该元素是tr且类dossier时才会返回。如果您想要一个通过DOM进一步返回的元素，则需要使用$("tr.alert").prevAll("tr.dossier")。

但是，只需使用$("tr.alert").prevAll("tr.dossier")，就会为每个tr返回所有以前的dossier个tr.alert类，然后将它们合并为一个集合。在您的DOM的情况下，jQuery将返回第一个tr.dossier的第一个tr.alert和最后一个的{3}。然后将这四个结果简化为DOM中可用的三个实际项目。

从那里，您可以使用.first()或.last()来选择单个项目，但它只会选择您的第一个或最后一个tr.dossier之前的tr.alert，而不会适用于两者（因为它似乎你需要）。使用.each()可以让您单独处理每个tr.alert并找到最接近的tr.dossier。

在此示例中，类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>

Answer 3

使用prevAll()

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;