javascript - 有没有办法找到最接近的非标签且没有类的元素

Question

给定一个元素，我需要找到最接近的元素，该元素不是 label 并且不是具有 radio 类或 checkbox 类的元素

这是我所做的

$parent = element.closest('div');

if($parent.hasClass('checkbox') || $parent.hasClass('radio'))
{
    $parent = $parent.parent();
}

error.appendTo($parent);

上面的代码在大多数情况下都有效，只是它只查找 div 而不是任何元素。

此外，是否有更短的方法来编写此代码，可以避免使用条件语句？也许，使用find()方法来搜索，但不知道如何使用它。

这是我正在尝试搜索的 html 代码

<div class="form-group  has-error">
    <label for="gender" class="col-md-2 control-label">Gender</label>
    <div class="col-md-10">
        <div class="radio">
            <label for="gender_">
                <input id="gender_" required="1" name="gender" value="" aria-required="true" aria-describedby="gender-error" type="radio">
                Please select your gender
            </label>
        </div>
        <div class="radio">
            <label for="gender_1">
                <input id="gender_1" required="1" name="gender" value="1" aria-required="true" type="radio">
                Male
            </label>
        </div>
        <div class="radio">
            <label for="gender_2">
                <input id="gender_2" required="1" name="gender" value="2" aria-required="true" type="radio">
                Female
            </label>
        </div>

    </div>
</div>

我希望能够附加到带有“col-md-10”类的 div。

不，它并不总是同一个类的 div 或事件，这就是为什么我想搜索不是复选框或单选类标签的最接近的元素

Answer 1

在 .closest() 选择器中使用 :not(input, label, .checkbox, .radio)。我添加了 input，因为 .closest() 使用它所使用的元素(input)开始检查。

注意:如果您知道要查找具有 .col-md-10 类的元素，则可以使用 .closest('. col-md-10').

var result = $('input').closest(':not(input, label, .checkbox, .radio)');

console.log(result[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group  has-error">
    <label for="gender" class="col-md-2 control-label">Gender</label>
    <div class="col-md-10">
        <div class="radio">
            <label for="gender_">
                <input id="gender_" required="1" name="gender" value="" aria-required="true" aria-describedby="gender-error" type="radio">
                Please select your gender
            </label>
        </div>
        <div class="radio">
            <label for="gender_1">
                <input id="gender_1" required="1" name="gender" value="1" aria-required="true" type="radio">
                Male
            </label>
        </div>
        <div class="radio">
            <label for="gender_2">
                <input id="gender_2" required="1" name="gender" value="2" aria-required="true" type="radio">
                Female
            </label>
        </div>

    </div>
</div>