jquery vorherige Element mit mehreren Klassen

Question

ich diese Struktur der Tabelle bekam:

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

Wenn ein tr Element alert Klasse hat, habe ich mit dossier Klasse alert Klasse zum vorherigen Elemente hinzuzufügen.

Ich versuche, diesen Code:

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

Dies funktioniert nur mit <tr class="dossier"> Elementen. Es funktioniert nicht mit <tr class="even dossier"> Elementen.

Hat jemand eine Möglichkeit, dies zu tun?

Answer 1

Die untene Erklärung im Zusammenhang mit meinem Beispiel-Code ist am Ende meiner Antwort.

Vor allem, da Sie haben mehrere tr.alert ‚s Sie .each() verwenden müssen, wie Sie wollen, Ihre Klasse auf den nächsten tr.dossier zu jedem tr.alert hinzufügen, aber die Mitte tr.dossier unverändert bleibt.

Mit $("tr.alert").prev("tr.dossier") wird nur das unmittelbar vorhergehende Element zurückgegeben und nur dann, wenn dieses Element eine tr mit der Klasse dossier ist. Wenn Sie ein Element benötigen, das weiter hinten im DOM liegt, müssen Sie $("tr.alert").prevAll("tr.dossier") verwenden.

jedoch einfach $("tr.alert").prevAll("tr.dossier") verwendet, wird alle bisherigen tr ‚s mit der Klasse zurückgeben dossier für jeden tr.alert und sie dann in einer Sammlung kombinieren. Im Falle Ihres DOM gibt jQuery die erste tr.dossier für Ihre erste tr.alert und alle drei für die letzte zurück. Diese vier Ergebnisse werden dann auf die drei tatsächlichen Elemente im DOM reduziert.

Von dort können Sie .first() oder .last() verwenden, um ein einzelnes Element zu wählen, aber es wird die tr.dossier vorhergehenden entweder die erste oder letzte tr.alert und nicht an beide nur wählen angewendet werden (wie es Sie benötigen erscheint). Mit .each() können Sie mit jedem tr.alert einzeln umgehen und finden Sie es am nächsten tr.dossier.

In diesem Beispiel sind die Zeilen mit der Klasse dossier grün hinterlegt und die mit alert haben die Schriftgröße 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 2

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

Sie können durch tr Elemente durchlaufen und überprüfen, ob Klasse alert. Dann können Sie die vorherigen Elemente überprüfen, die Klasse hat dossier und fügen Klasse alert auf dieses Element:

$("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>