我想查找某个元素是否具有类 lesson_read
,然后将类 found
添加到其上方的 .course_section
中。但不要将类添加到其下方的 .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);
}
});
但是,这会将 found
类添加到每个类(class)部分。
最佳答案
您需要使用.prev()
选择元素的前一个兄弟元素。
$(".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>
关于javascript - 如何使用 jquery 将类添加到元素的特定同级元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52518122/