jquery can't find detect display:none if span/div uses class only works with style

Question

我有一个名为 htmltext 的 var，如您所见，它分配了 htmlcode，它有多个 div/span 容器，有些使用样式，有些使用类，有些使用 display:none。

然后我对每个 span/div 容器进行检查，以读取显示属性及其设置，但它只返回使用样式而不是类的结果。

http://jsfiddle.net/hpqzb21j/2/

    $("#button5").click(function (event) {

        var htmltext = '<span><style>.ESkP{display:none}.GlJO{display:inline}.ghvd{display:none}.epK7{display:inline}.qwyK{display:none}.tCh3{display:inline}.BsEK{display:none}.e16T{display:inline}</style><span class="BsEK">60</span><span class="epK7">200</span>.<span class="GlJO">68</span><span class="BsEK">83</span><div style="display:none">83</div><div style="display:none">199</div>.<span class="76">24</span><span class="tCh3">.</span><span style="display:none">63</span><span></span><span style="display:none">65</span><div style="display:none">65</div><span style="display:none">85</span><span></span><span class="GlJO">107</span><span style="display:none">219</span><span></span><span style="display:none">241</span><div style="display:none">241</div></span>';

        $data = $('<span/>').html(htmltext);

        $data.find("div,span > span").each(function() {
            temp_display = $(this).css('display');
            console.log("display status = " + temp_display + " | text in container = "+ $(this).text());
        });

    });

以下是 var htmltext 设置的内容，因此您可以更好地阅读它，因为它必须全部在上面的一行中。

<span>

<style>
.ESkP{display:none}
.GlJO{display:inline}
.ghvd{display:none}
.epK7{display:inline}
.qwyK{display:none}
.tCh3{display:inline}
.BsEK{display:none}
.e16T{display:inline}
</style>

<span class="BsEK">60</span>
<span class="epK7">200</span>
.
<span class="GlJO">68</span>
<span class="BsEK">83</span>
<div style="display:none">83</div>
<div style="display:none">199</div>
.
<span class="76">24</span>
<span class="tCh3">.</span>
<span style="display:none">63</span>
<span></span>
<span style="display:none">65</span>
<div style="display:none">65</div>
<span style="display:none">85</span>
<span></span>
<span class="GlJO">107</span>
<span style="display:none">219</span>
<span></span>
<span style="display:none">241</span>
<div style="display:none">241</div>

</span>

下面是我得到的输出，

Resource interpreted as Font but transferred with MIME type image/svg+xml.
fiddle.jshell.net:30display status =  | text in container = 60
fiddle.jshell.net:30display status =  | text in container = 200
fiddle.jshell.net:30display status =  | text in container = 68
fiddle.jshell.net:30display status =  | text in container = 83
fiddle.jshell.net:30display status = none | text in container = 83
fiddle.jshell.net:30display status = none | text in container = 199
fiddle.jshell.net:30display status =  | text in container = 24
fiddle.jshell.net:30display status =  | text in container = .
fiddle.jshell.net:30display status = none | text in container = 63
fiddle.jshell.net:30display status =  | text in container = 
2fiddle.jshell.net:30display status = none | text in container = 65
fiddle.jshell.net:30display status = none | text in container = 85
fiddle.jshell.net:30display status =  | text in container = 
fiddle.jshell.net:30display status =  | text in container = 107
fiddle.jshell.net:30display status = none | text in container = 219
fiddle.jshell.net:30display status =  | text in container = 
2fiddle.jshell.net:30display status = none | text in container = 241

Answer 1

您可以使用:visible 伪选择器来检查元素是否可见。

is_visible = $(this).is(':visible');

如果要检查元素是否不可见，可以使用:hidden

is_hidden = $(this).is(':hidden');