时间戳

首页 > 解决方案 > 当孩子有类jquery时添加类

javascript - 当孩子有类jquery时添加类

问题描述

我有一个将类“selected-role”添加到活动选项卡的表单，当表单选项卡具有类“selected-role”时，我试图更改父级的边框颜色。我如何让它只添加到“活动”选项卡？现在它正在为所有三个选项卡添加边框颜色

<div class="register_checkbox_label-container col">
    <label tabindex="0" for="register_checkbox_one" class="form_checkbox_label form_checkbox_label--role selected-role" id="default-role" data-role="one">
        One
    </label>
</div>

<div class="register_checkbox_label-container col">
    <label tabindex="0" for="register_checkbox_two" class="form_checkbox_label form_checkbox_label--role" data-role="two"  data-offset="0">
        Two
    </label>
</div>

<div class="register_checkbox_label-container col">
    <label tabindex="0" for="register_checkbox_three" class="form_checkbox_label form_checkbox_label--role" data-role="three"  data-offset="0">
        Three
    </label>
</div>

查询：

if($('.form_checkbox_label').hasClass('selected-role')){
      $(this).find('.register_checkbox_label-container').addClass('border-fuschia');
    }

标签： javascriptjquery

解决方案

您不需要循环来实现这一点。只需使用:has()选择器选择父元素以仅匹配具有给定子元素的父元素：

$('.register_checkbox_label-container:has(.selected-role)').addClass('border-fuschia');
.border-fuschia {
  border: 1px solid fuchsia;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="register_checkbox_label-container col">
  <label class="selected-role">One</label>
</div>
<div class="register_checkbox_label-container col">
  <label>Two</label>
</div>
<div class="register_checkbox_label-container col">
  <label>Three</label>
</div>

请注意，我只删除了上面 HTML 的非必要部分，以使示例更短。

推荐阅读