鉴于
following code:
<div class='hotel_photo_select'> Hello </div> <div class='itsHidden' style='display:none'> <div class='hotel_photo_select'> Hello </div> </div>
和:
$('.hotel_photo_select').fadeOut(300); $('.itsHidden').show();
我希望两个.hotel_photo_select div都被隐藏.但是,当我显示容器时,第二个不会被隐藏.
这是一个jQuery错误吗?在fadeOut()之后,每个元素都应该被隐藏.
我认为唯一的解决方案是:
$('.hotel_photo_select').fadeOut(300,function () { $(this).hide(); }); $('.itsHidden').show();
我发现它不够优雅.
解决方法
从技术上讲,对于这种类型的方法,您需要使用’.each()’.然后还可以添加一个检查点,我们确定父项是否可见,如果它不可见,那么我们将其显示.
但是,使父级可见,可能会对您的布局产生负面影响,YES.但是没有更好的方法可以做到这一点,因此你应该避免这些类型的情况.
实例:http://jsfiddle.net/QMSzg/21/
$('.hotel_photo_select').each(function () { var this_parent = $(this).parent('div'); if (this_parent.is(':hidden')) { this_parent.show(); } $(this).fadeOut(500); });