Question

我有一个问题困扰了我几天。它是关于如何使用.hasClass()来检测所有ul组至少有一个类是活动的，以便继续表格（与jQuery验证相结合）

<form id="rate"> 
<ul class="scoreList listRe listR2">
    <li><a href="#">5</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">1</a></li>
</ul>

<ul class="scoreList listRe listR2">
    <li><a href="#">5</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">1</a></li>
</ul>

<ul class="scoreList listRe listR3">
    <li><a href="#">5</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">1</a></li>
</ul>

</from>

我正在编写jQuery如下，我认为它有问题（虽然它有效）

$('#rate').validate({
              submitHandler: function(form) {
                if($('.listR1 a').hasClass('active')&&$('.listR2 a').hasClass('active')&&$('.listR3 a').hasClass('active'))
                {
                    form.submit();
                }
                else{
                    alert("You must rate all!!!");
                    return false;
                };
             }
            });

但是我在考虑是否可以做如下：

if($('.listR1 a' && '.listR2 a' && 'listR3 a').hasClass())
                {
                    form.submit();
                }
                else{
                    alert("You must rate all!!!");
                    return false;
                };

你们对此有什么想法吗？我将非常感激。

最诚挚的问候，杰西

Answer 1

只需在选择器中使用类名，然后检查它的长度。例如：

if ( $('.div1.active').length > 0 && $('.div2.active').length > 0 ) {
  // do stuff
}

Answer 2

尝试

var ul = $("[class*=listR]")
, active = function (elem) {
    var arr = $.grep(elem, function (el, i) {
        return $(el).find("a").is(".active")
    });
    return arr.length !== elem.length ? false : true
};

$('#rate').validate({
    submitHandler: function (form) {
        if (active(ul)) {
            form.submit();
        } else {
            alert("You must rate all!!!");
            return false;
        };
    }
});

jsfiddle http://jsfiddle.net/guest271314/qbLgh8yj/

var ul = $("[class*=listR]")
, button = $("button")
, label = $("label")
, active = function (elem) {
    var arr = $.grep(elem, function (el, i) {
        return $(el).find("a").is(".active")
    });
    return arr.length !== elem.length ? false : true
};
label.text(active(ul));
button.one("click", function() {
  ul.find("a.active").toggleClass("active");
  label.text(active(ul));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>toggle active</button><label for="button"></label>
<ul class="scoreList listRe listR2">
    <li><a href="#">5</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#" class="active">1</a>
    </li>
</ul>
<ul class="scoreList listRe listR2">
    <li><a href="#">5</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#" class="active">1</a>
    </li>
</ul>
<ul class="scoreList listRe listR3">
    <li><a href="#">5</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#" class="active">1</a>
    </li>
</ul>

使用hasClass检测多个组元素包含相同的类

2 个答案: