我有若干个元素,如:
<p class="test">
<p style="display: none">1</p>
<p style="display: none">2</p>
<p style="display: none">3</p>
<p style="display: none">4</p>
</p>
在$(function(){})中初始化第一个p为可见:$('.test :nth-child(1)').css('display','block');
然后在$(function(){})外面用:visible选择器选择该元素并赋值给变量:
var aa = $('.test p:visible');
再在控制台显示:
$('#say').click(function () {
console.log(aa);
});
此时控制台输出为:
context:document
length:0
prevObject:m.fn.init[1]
selector:".test p:visible"
但是,如果直接在控制台输出:
$('#say').click(function () {
console.log($('.test p:visible'));
});
则会显示该元素:
0:p
context:document
length:1
prevObject:m.fn.init[1]
selector:".test p:visible"
另外,如果把上述jquery代码都放在$(function(){})中,则控制台输出都正常。
再有,其他选择器还没遇到这个问题,:hidden也没遇到。
这究竟是什么原因呢?
关键是在执行
var aa = $('.test p:visible');
这句话的时候,有没得符合选择条件的元素