My JavaScript code utilizes the css selector [style="display:none"], and it functions correctly in Chrome, Firefox, Opera, and Safari on Windows. However, in Internet Explorer 11, it behaves unexpectedly.
To test this issue, simply click on the buttons (e.g. #visible_elements_count) in Chrome and then do the same in Internet Explorer. You will notice different return values.
Here is the HTML code for reference:
<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>
I have researched extensively, including reading resources like W3Schools, but I still cannot resolve this issue. Any assistance would be highly appreciated!