Previous jquery element with multiple classes

Question

I got this table structure:

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

When the tr element has an alert class, I have to add the alert class to the previous element with the dossier class.

I am trying this code:

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

This only works with <tr class="dossier"> elements. It does not work with <tr class="even dossier"> elements.

Does anyone have a way to do this?

Answer 1

Below is the explanation in my sample code at the end of my answer.

First of all, since you have several tr.alert , you will need to use .each() , since you want to add your class to the nearest tr.dossier to each tr.alert , but leaving the middle of tr.dossier unchanged.

Using $("tr.alert").prev("tr.dossier") will only return the immediately preceding element, and only if this element is tr with the dossier class. If you want an element that is still located back through the DOM, you need to use $("tr.alert").prevAll("tr.dossier") .

However, simply using $("tr.alert").prevAll("tr.dossier") will return all previous tr with the dossier class for each tr.alert , and then combine them into one collection. In the case of your DOM, jQuery will return the first tr.dossier for your first tr.alert and all three for the last. Then these four results will be reduced to three actual items available in the DOM.

From there, you can use .first() or .last() to select a single item, but it will only select tr.dossier that precedes either your first or last tr.alert , and will not apply to both (as you think required). Using .each() , you can deal with each tr.alert individually and find it near tr.dossier .

In this example, lines with the dossier class have a green background, and those with alert have a font size of 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

You can iterate through tr elements and check if there is an alert class. Then you can check the previous elements with the dossier class and add the alert class to this 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> 

Answer 3

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