Javascript 如果元素没有类，则搜索

我浏览了一大堆帖子，还没有找到一个似乎有效的解决方案。。。在这一点上有点沮丧，所以我想我应该看看其他人是否有解决办法

因此，我试图在我正在创建的小部件上验证一个属性为“required”的字段，问题是当用户单击“create”按钮时，它会创建一个新的可见部分，并且出于各种原因，还会在一个隐藏部分中使用类“hide”复制它

我的验证代码如下所示：

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是否有长度，以及它的父元素是否有类“hide”。但是，将语句更改为以下内容似乎不起作用：

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>

您的
if
语句正在测试所需的元素是否都不在隐藏的
LI
中，因为
hasClass（“hide”）
如果所选元素中有类，则为true

您可以在选择器中使用
：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");
});

哇，我知道我把这件事搞得太复杂了。可见选择器工作得非常好！非常感谢你让我免于在这件事上发疯：P
$invalid = $required.filter(function() {
    return !this.value && !$(this).closest("li").hasClass("hide");
});