2

スペースがある場合にのみdivを表示するソリューションを探しています。

私のブログの投稿ページでは、左側のサイドバーに最新の投稿を表示しています...

ノーネイネヴァー投稿ページ

投稿の長さに応じて、異なる数のサイドバーアイテムを表示したいと思います。現在、異なる数のアイテムを表示する3つのdivがあり、このスクリプトを実行しています。

    if ($("#contentheight").height()>960 && $("#contentheight").height()<1200) {
  document.getElementById("threeposts").className += "hide";
}
else if ($("#contentheight").height()>1200 && $("#contentheight").height()<1880) {
  document.getElementById("fiveposts").className += "hide";
}
else if ($("#contentheight").height()>1880) {
  document.getElementById("sevenposts").className += "hide";
}

ただし、これはほとんど便利ではなく、非常に短い投稿の場合、アイテムはまったく表示されません。

たとえば、7つのアイテムをコーディングできるが、親divが取ることができる数だけを表示するという回避策はありますか？私はoverflow：hiddenを使用してみましたが、最終的には最終アイテムが半分に切り刻まれてしまいます。

たとえば、3つの完全なアイテムを入れるのに十分なスペースがある場合、それらは表示されますが、それ以降は表示されません。

4

2 に答える 2

0

非表示のdivまたは目的の幅でDOMに挿入されていないdivを作成できます。

次に、このdivの高さが投稿の長さを超えるまで、アイテムごとに挿入します。
これで、divに収まるアイテムの数がわかりました。

于 2012-10-17T11:23:14.043 に答える
0

次のようなものを試してください：

$('#container').children().each( function() {
  var top = $(this).top;
  var height = $(this).height;
  if (top + height > $(this).parent().height()) {
    $(this).className += "hide";
  }
});
于 2012-10-17T11:25:55.277 に答える