javascript - 搜索元素是否没有类

Question

我浏览了很多帖子，但没有找到似乎有效的解决方案...此时有点沮丧，所以我想看看是否有其他人有解决方案。

所以，我正在尝试验证我正在创建的小部件上具有属性“required”的字段，问题是当用户单击“创建”按钮时，它会创建一个新的可见部分并重复由于各种原因，它位于类“隐藏”的隐藏部分中。

我的验证码是这样的:

var $required = $("input[required]").css('border', '1px solid #CCC');
    $invalid = $required.filter(function(){
        return !this.value;
    }).css('border', '1px solid red');

if($invalid.length){
    alert('Please fill in all required fields');
} else {
    //ajax call
}

这在我的所有其他小部件上工作得很好，但由于这个新小部件中有一个隐藏的重复项，它传递可见字段但在隐藏字段上失败。

我的解决方案是在“if”语句中添加第二部分来搜索 invalid 是否有长度以及它的父元素是否没有类“隐藏”。但是，将语句更改为以下内容似乎不起作用:

if( $invalid.length && !$("input[required]").closest("li").hasClass("hide") ){
    alert('Please fill in all required fields');
} else {
    //ajax call
}

现在好像每次都过去了...

我要验证的元素的(一般)结构是 - 我删除了大部分代码，只是为了简化它以供查看:

<li>
    <div class="row-fluid>
        <div class="span3">
            <!-- Some content -->
        </div>
        <div class="span9">
            <input type="text" required />
            <input type="text" />
            <input type="text" />
        </div>
    </div>
</li>

隐藏元素遵循相同的结构，只是它有

<li class="hide">

作为父元素。

我假设我的 jQuery 语法有问题，但我已经尝试解决这个问题很长时间了，以至于我可能只是忽略了一些非常简单的事情......

想法？ ;)

Answer 1

您的 if 语句正在测试是否 none 所需元素在隐藏的 LI 中，因为 hasClass("hide") 如果任何选定元素具有该类，则为真。

您可以在选择器中使用 :visible 伪类，这样您就可以只测试未隐藏的元素。

var $required = $("input[required]:visible").css('border', '1px solid #CCC');

或者您可以使用未隐藏的父项中的搜索来查找所需的输入。

var $required = $("li:not(.hide) input[required]").css('border', '1px solid #CCC');

或者您可以在过滤器函数中进行检查:

$invalid = $required.filter(function() {
    return !this.value && !$(this).closest("li").hasClass("hide");
});