jQuery 验证插件 -- 将错误类添加到其他元素

Question

我有一个使用jQuery验证插件的表单。表单域位于一系列折叠框中，表单错误消息显示在每个域下方。这很好，除非该字段位于已关闭的手风琴中，然后无法知道手风琴包含错误。

有没有办法将错误类应用于手风琴的标题？我知道我可以使用类似的东西

$("#form").validate({
    rules: {
    ...
    },
    highlight: function(element) {
        $(element).closest(".title").addClass("error");
    },
    unhighlight: function(element) {
        $(element).closest(".title").removeClass("error");
    }
});

以字段的容器为目标，但在本例中，它不是父级。

我的手风琴结构如下.我需要将错误类应用于包含产生错误的字段的相应"title"div。

<ul class="accordion">
    <li class="active">
        <div class="title panel1">
            Accordion Panel 1
        </div>
        <div class="content">
            ... form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel2">
            Accordion Panel 2
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
    <li>
        <div class="title panel3">
            Accordion Panel 3
        </div>
        <div class="content">
            ... more form fields go here ...
        </div>
    </li>
</ul>

我也尝试过这个，但没有运气：

highlight: function(element) {
    $(element).closest(".title").addClass("error");
},
unhighlight: function(element) {
    $(element).closest(".title").removeClass("error");
}

有没有办法定位"标题"div？

Answer 1

这里的title元素是.content父级的前一个同级

您可以使用

$(element).closest(".content").prev('.title').addClass("error");

或

$(element).closest("li").children('.title').addClass("error");