<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
<tr class="main"></tr>
<tr class="emails-details">
<button>some button</button>
</tr>
After clicking a button, I am trying to target the previous tr.main element. However, I am encountering challenges in identifying the correct preceding element using .prev(), .prevAll(), or .prevUntil().
$(function() {
$('.dropdown-image').click(function() {
$(this).parent().parent().parent().prev($("tr:nth-of-type(1)")).children().css('border-bottom-color', '#a3d0dd');
$(this).parent().parent().parent().prevUntil('.main').children().css('border-bottom-color', '#a3d0dd');
});
});
I have successfully targeted the first row because it does not have a subsequent row of tr.emails-details following it. However, I now need to modify the border-bottom-color of the row above as shown by the absence of the blue border in the selected row.