jQuery屬性選擇器在Internet Explorer中不起作用

Question

在我的JavaScript中，我使用css選擇器[style =“ display：none”]，並且該代碼可以按預期在Chrome，Firefox，Opera和Safari（在Windows中）工作。

但是，不幸的是，在Internet Explorer（版本11）中，它無法正常工作。

供測試用：
只需單擊Chrome中的按鈕（例如#visible_elements_count），然后單擊Internet Explorer中的按鈕。 您將遇到不同的返回值。

HTML：

<section>
    <ul>
        <li>visible Element</li>
        <li style="display:none">invisible Element</li>
        <li>visible Element</li>
    </ul>
</section>

<button id="all_elements_count">all elements</button>
<button id="visible_elements_count">visible elements</button>
<button id="invisible_elements_count">invisible elements</button>

<!-- JAVASCRIPTS -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $("#all_elements_count").click(function () {
        var counter = $("section ul li").length;
        alert(counter);
    });

    $("#visible_elements_count").click(function () {
        var counter = $("section ul li:not([style='display:none'])").length;
        alert(counter);
    });

    $("#invisible_elements_count").click(function () {
        var counter = $("section ul li[style='display:none']").length;
        alert(counter);
    });
</script>

資料來源：我閱讀了有關選擇器的所有內容 ！ 仍然不能解決這個問題。

任何幫助表示贊賞！

Answer 1

您應該使用.filter() :hidden, :visible與.filter()結合使用：

    $("#all_elements_count").click(function () {
        var counter = $("section ul li").length;
        alert(counter);
    });

    $("#visible_elements_count").click(function () {
        var counter = $("section ul li").filter(':visible').length;
        alert(counter);
    });

    $("#invisible_elements_count").click(function () {
        var counter = $("section ul li").filter(':hidden').length;
        alert(counter);
    });

Answer 2

您應該使用jQuery :visible和:hidden偽選擇器：

var counter = $("section ul li:visible").length;

var counter = $("section ul li:hidden").length;

為了獲得更好的性能，請參閱@Jai的答案。