如何使用jQuery将类添加到元素的特定同级中？

Question

I want to find if an element has class lesson_read then add a class found to .course_section that comes just above it. but don't add class to .course_section which comes below it. here is the html

<table class="table">               
    <tbody>
        <tr class="course_section "><!-- this should have class "found" -->
            <td colspan="4">Introduction to AEM</td>
        </tr>
        <tr class="course_lesson lesson_read">
            <td class="curriculum-icon"><i class="icon-play"></i></td>
            <td><a href="#">Introduction to AEM</a></td>
            <td> </td>
            <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td>
        </tr>
        <tr class="course_lesson lesson_read">
            <td class="curriculum-icon"><i class="icon-play"></i></td>
            <td><a href="#">Installing AEM</a></td>
            <td> </td>
            <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td>
        </tr>
        <tr class="course_lesson">
            <td class="curriculum-icon"><i class="icon-task"></i></td>
            <td>AEM Installation Quiz</td>
            <td> </td>
            <td><span class="time"><i class="fa fa-clock-o"></i> Unlimited</span></td>
        </tr>
        <tr class="course_section">
            <td colspan="4">AEM Environment</td>
        </tr>
        <tr class="course_lesson">
            <td class="curriculum-icon"><i class="icon-text-document"></i></td>
            <td>AEM Instances</td>
            <td> </td>
            <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td>
        </tr>
        <tr class="course_lesson">
            <td class="curriculum-icon"><i class="icon-play"></i></td>
            <td>Developer Tools</td>
            <td> </td>
            <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td>
        </tr>
    </tbody>
</table>

I have tried this

jQuery('.course_section').each(function() {
    var c='';
    jQuery(this).siblings().each(function() {
        if(jQuery(this).hasClass('lesson_read')){
            c='found';      
        }      
    });
    if(c=='found'){
        jQuery(this).addClass(c);   
    }
});

However this adds class found to every course section.

Answer 1

You need to use .prev() that select preceding sibling of element.

$(".lesson_read").prev(".course_section").addClass("found");

 $(".lesson_read").prev(".course_section").addClass("found"); 

 .found {color:red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <tbody> <tr class="course_section"><!-- this should have class "found" --> <td colspan="4">Introduction to AEM</td> </tr> <tr class="course_lesson lesson_read"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td><a href="#">Introduction to AEM</a></td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson lesson_read"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td><a href="#">Installing AEM</a></td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-task"></i></td> <td>AEM Installation Quiz</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> Unlimited</span></td> </tr> <tr class="course_section"> <td colspan="4">AEM Environment</td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-text-document"></i></td> <td>AEM Instances</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td>Developer Tools</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> </tbody></table> 

Answer 2

You have to use prevAll() to get all previous siblings which have class course_section then have to use .last() to get last previous siblings(course_section) of lesson_read class

 $('.lesson_read').prevAll('.course_section').last().addClass('found'); 

 .found{ color:red} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <tbody> <tr class="course_section "><!-- this should have class "found" --> <td colspan="4">Introduction to AEM</td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td><a href="#">Introduction to AEM</a></td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson lesson_read"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td><a href="#">Installing AEM</a></td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-task"></i></td> <td>AEM Installation Quiz</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> Unlimited</span></td> </tr> <tr class="course_section"> <td colspan="4">AEM Environment</td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-text-document"></i></td> <td>AEM Instances</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> <tr class="course_lesson"> <td class="curriculum-icon"><i class="icon-play"></i></td> <td>Developer Tools</td> <td> </td> <td><span class="time"><i class="fa fa-clock-o"></i> 00:00:00</span></td> </tr> </tbody> </table>