jquery elemento precedente, con diverse classi

Question

ho avuto questa struttura della tabella:

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

Quando un elemento tr ha alert classe, devo aggiungere alert classe all'elemento precedente con dossier di classe.

provo questo codice:

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

Questo è il lavoro solo con i <tr class="dossier"> elementi. Non funziona con gli elementi <tr class="even dossier">.

Qualcuno ha un modo per farlo?

Answer 1

La spiegazione che segue è nel contesto del mio codice di esempio alla fine della mia risposta.

Prima di tutto dal momento che ha l' più tr.alert sarà necessario utilizzare .each() come si vogliono aggiungere la classe al più vicino tr.dossier ad ogni tr.alert ma lasciando al centro tr.dossier invariato.

L'utilizzo di $("tr.alert").prev("tr.dossier") restituisce solo l'elemento immediatamente precedente e solo se tale elemento è un tr con la classe dossier. Se si desidera un elemento che è più indietro attraverso il DOM, sarà necessario utilizzare $("tr.alert").prevAll("tr.dossier").

Tuttavia semplicemente utilizzando $("tr.alert").prevAll("tr.dossier") restituirà tutti i precedenti tr 's con la classe dossier per ogni tr.alert e poi combinarle in un'unica collezione. Nel caso del tuo DOM jQuery restituirà il primo tr.dossier per il tuo primo tr.alert e tutti e tre per l'ultimo. Questi quattro risultati saranno quindi ridotti ai tre oggetti effettivi disponibili nel DOM.

Da qui è possibile utilizzare .first() o .last() per selezionare un singolo elemento, ma sarà solo selezionare il tr.dossier che precede sia il vostro prima o l'ultima tr.alert e non verrà applicato a entrambi (come appare si richiede). L'utilizzo di .each() ti consentirà di gestire individualmente ogni tr.alert e di trovarlo più vicino a tr.dossier.

In questo esempio le righe con la classe dossier hanno uno sfondo verde e quelle con alert hanno la dimensione del carattere impostata su 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

Usa 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

È possibile scorrere tr elementi e verificare se hanno classe alert. Quindi è possibile controllare gli elementi precedenti che ha classe dossier e aggiungere classe alert a quell'elemento:

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