检查当前元素在 jQuery 中是否有 class 的子元素

Question

我想检查一个元素是否有带 class 的子元素。

所以我用了：

$('input:checkbox, input:radio').on('click', function() {
    if($(this).children().hasClass('sub-question')) {
        alert('Yes');
    }
    else {
        alert('No');
    }
});

我的HTML如下：

<div class="form-group">
    <label>Item A
        <input type="radio">
    </label>
</div>
<div class="form-group">
    <label>Item B
        <input type="radio">
    </label>
    <div class="row sub-question">
        <div class="form-group">
            <label class="container_radio">Sub level 1
                <input type="radio">
            </label>
        </div>
    </div>
</div>

但是没用。

你能帮我解决这个问题吗？

谢谢。

Answer 1

this 指的是 checkbox/radio 按钮的上下文。您需要遍历到最近的表单组，然后使用带有长度的 .find() 选择器来检查元素是否存在：

if($(this).closest('.form-group').find('.sub-question').length > 0) {
    alert('Yes');
}
else {
    alert('No');
}

Answer 2

在您的示例中，'input:checkbox, input:radio' 选择的任何元素都有子元素。

您可以使用 .closet 方法

向上遍历其祖先直到找到 .sub-question 元素

$('input:checkbox, input:radio').on('click', function() {
    if($(this).closest('.form-group').find('.sub-question').length > 0) {
        alert('Yes');
    }
    else {
        alert('No');
    }
});

检查当前元素在 jQuery 中是否有 class 的子元素

Check if current element has a children with class in jQuery

jquery

children