如何使用 jquery 将 class 添加到元素的特定兄弟姐妹？

Question

我想查找某个元素是否具有 class lesson_read，然后在其正上方的 .course_section 中添加一个 class found。但不要将 class 添加到它下面的 .course_section 中。这是 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>

我试过了

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);   
    }
});

但是，这会将 class found 添加到每个课程部分。

Answer 1

您需要使用 .prev() 元素的 select 前面的兄弟元素。

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

您必须使用 prevAll() to get all previous siblings which have class course_section then have to use .last() 来获取 lesson_read class

的最后一个兄弟姐妹 (course_section)

$('.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>

如何使用 jquery 将 class 添加到元素的特定兄弟姐妹？

How to add class to a specific siblings of element using jquery?

html

javascript

jquery

siblings