1

最初は、すべてのdivにstyledisplaynoneプロパティがあります。内部にコンテンツがある場合は、jquery showメソッドでdivを有効にしています。スタイルが表示されていないdivを検索したいのですが、アクティブなdivが2つおきに追加された後、ページ分割用のcssを挿入します。後：常に印刷目的で。ユーザーが印刷するときに、1ページに2つのdivだけを表示したい。したがって、この例では、par4とpar8のページ分割にcssを挿入します。

（つまり、スタイルが表示されないdivを見つけて、1つおきの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>
4

3 に答える 3

3

ここ：

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

ライブデモ: http://jsfiddle.net/KxGKG/2/

スタイルをインラインで記述するのではなく、CSS クラスを設定することをお勧めします。スタイルを直接設定するよりも、クラスを設定/設定解除する方が簡単です。

于 2012-09-27T11:38:11.683 に答える
1

多分これはあなたを助けるかもしれませんが、CSS はそのためのより良い解決策ではありませんか?

$(function() {
    $(".flip:nth-child(even)").css({ 'page-break-after': 'always' });
});
于 2012-09-27T11:35:38.283 に答える
1

each ループを含む jQuery :visible セレクターがそのトリックを行います。

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

編集 n 番目 (偶数) の select はよりエレガントです (そして短縮されたコード)。

于 2012-09-27T11:36:27.833 に答える