找到没有样式的 div 显示 none 并在每隔一个 div 插入一个分页样式

Question

最初所有的 div 都有 style display none 属性。如果其中有任何内容，我将通过 jquery show 方法启用 div， 我想找到没有样式 display:none 的 div，并且在每隔一个活动 div 之后， 我想为 page-break-after:always 插入一个 css 用于打印目的。当用户打印时，我希望一页中只有 2 个 div。 所以在这个例子中，我想在 par4 和 par8 上插入 css 分页符

（总而言之，找到没有样式的div不显示，并在每隔一个div插入一个分页样式）

<div id="parent">
<div class="flip" id="par1" style="display:none;">empty</div>                     
<div class="flip" id="par2">Image/content</div>                           
<div class="flip" id="par3" style="display:none;">empty</div>                       
<div class="flip" id="par4">Image/content</div>                            
<div class="flip" id="par5" style="display:none;">empty</div>                        
<div class="flip" id="par6">Image/content</div>                         
<div class="flip" id="par7" style="display:none;">empty</div>                             
<div class="flip" id="par8">Image/content</div>                                             
<div class="flip" id="par10" style="display:none;">empty</div> 
</div>

Answer 1

这里：

$( '#parent' ).children( ':visible:odd' ).css( 'page-break-after', 'always' );

现场演示： http://jsfiddle.net/KxGKG/2/

虽然我建议设置一个 CSS 类，而不是内联编写样式。设置/取消设置类比直接设置样式更容易。

Answer 2

带有 each 循环的 jQuery :visible 选择器可以解决问题。

$('.flip:visible').each(function(idx, elm) {
    if(idx & 1 == 1) { // every 2nd one
        $(this).css('page-break-after', 'always');
    }
});

编辑 第 n 个（偶数）选择更优雅（并且代码更短）。

Answer 3

也许这可以帮助你，但 CSS 不是更好的解决方案吗？

$(function() {
    $(".flip:nth-child(even)").css({ 'page-break-after': 'always' });
});