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>

资料来源:我阅读了所有内容 about selectors !仍然不能解决这个问题。

感谢任何帮助!

Answer 1

你应该使用 :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);
    });