使用jQuery查找元素的下一个实例，而不考虑关系

Finding the next instance of an element, regardless of relationship, using jQuery?

本文关键字：不考虑 关系 实例 下一个 jQuery 查找 元素 使用      更新时间：2023-09-26

我正在为表单处理错误消息，并试图找出如何使用一个函数显示错误。不幸的是，在我的表单中，错误消息元素与字段的关系各不相同

<div class="col-sm-6">
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />
    <div class="error">Please enter your first name.</div>
</div>

在这种情况下，我可以使用$(this).next.show();来显示错误消息。

然而，在其他情况下，我的字段的结构是这样的：

<div id="variants">
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="red">Red</label><br/>
        <label><input type="radio" name="variant" value="green">Green</label><br/>
        <label><input type="radio" name="variant" value="blue">Blue</label>
    </div>
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="yellow">Yellow</label><br/>
        <label><input type="radio" name="variant" value="brown">Brown</label><br/>
        <label><input type="radio" name="variant" value="orange">Orange</label>
    </div>
    <div class="error">Please select a product variant.</div>
</div>

在本例中，上面的jQuery选择器将不起作用，因为.error元素是输入的父元素的同级元素，而不是输入的直接同级元素。

我的问题是，有没有任何方法可以选择元素的下一个最接近的实例，而不管它与被比较的元素的关系如何？我正在研究.closest()，但一直没能使它发挥作用。

谢谢！

您需要在层次结构的每个级别上有效地上下搜索。

$(this).parents().has('.error').first().find('.error');

这将依次检查每个父级，查看何时有错误类，返回最接近的，然后找到子级错误。

你也可以使用这样的东西：

$(this).closest(':has(.error)').find('.error');

以下是一个JSFiddle，显示两者都在工作（以停止所有的抱怨）：http://jsfiddle.net/u37twowx/1/：）

您将注意到，此解决方案不需要在层次结构中添加类

为每个输入元素容器div使用一个公共类，并使用closest()和find()针对错误div。

例如：

<div class="col-sm-6 element">
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />
    <div class="error">Please enter your first name.</div>
</div>
<div id="variants" class="element">
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="red">Red</label><br/>
        <label><input type="radio" name="variant" value="green">Green</label><br/>
        <label><input type="radio" name="variant" value="blue">Blue</label>
    </div>
    <div class="col-sm-6 col-lg-4">
        <label><input type="radio" name="variant" value="yellow">Yellow</label><br/>
        <label><input type="radio" name="variant" value="brown">Brown</label><br/>
        <label><input type="radio" name="variant" value="orange">Orange</label>
    </div>
    <div class="error">Please select a product variant.</div>
</div>

现在使用jquery：

$(this).closest(".element").find(".error").show();

我一直在使用:after伪类，然后将该类添加到接收错误的元素中。

有多种方法可以做到这一点，尤其是如果您想要自定义消息。

HTML

<input type="text" id="first_name" name="first_name" />

CSS

input.error:after, input.error::after {
    content: '';
    position: relative;
    bottom: 0;
    height: 20px;
    background: red;
    color: white;
}
#first_name.error:after, #first_name.error:after {
    content: 'Please input first name.';
}
#last_name.error:after, #last_name.error:after {
    content: 'Please input last name.';
}
.
.
.

jQuery

$('input').keypress(function(){
    if(/*Conditional*/){
        $(this).addClass('error');
    }
});

这是一个简单的jQuery函数，您只需要设置它来相应地处理错误。

相关文章：