0

表示要素と非表示要素を含むhtmlリストがあります。可視性は時間の経過とともに動的に変化します（一部の要素は非表示になり、一部は表示されます）。

<ul>
   <li>  </li>
   <li style="display:none">  </li>
   <li>  </li>
   <li style="display:none">  </li>
   <li>  </li>
   <li>  </li>
   <li>  </li>
</ul>

私が欲しいのは、最大でX個<li>の要素を表示するリストなので、Xを超える要素は非表示にする必要があります。それを達成するための提案された方法は何ですか？私は2つのアイデアを思いついた：

  • の一定サイズを設定<ul>して追加しoverflow: hiddenます（オーバーヘッド<li>は表示されません）。単純ですが、<li>が一定のサイズであり、リストに収まる要素の数を予測できる場合にのみ機能します。
  • javascript（私はjQueryを使用）を使用して、表示されている要素の数をカウントし、非表示にする必要がある要素を非表示にします。

純粋なCSSでそれを行う方法がある場合、好ましいアプローチまたは回答を提案できますか？

4

3 に答える 3

2

gt()と一緒にセレクターを使用する:visible

$('li:visible:gt(20)').hide()

または、次を使用しますslice()。

$('li:visible').slice(20).hide()
于 2013-02-18T11:37:15.517 に答える
1

目に見える要素の非表示を制御する関数を作成できます

function checkList()
{    
    $('ul li:visible:gt(X)').hide(); 
}

そして、ULとそのLIに変更を加えるたびに、関数を呼び出す必要があります。おそらくID属性を介して、ULにもう少し識別を提案します。

于 2013-02-18T11:42:58.630 に答える
1

n番目の子セレクターを使用すると、純粋なcssでそれを実現できます。ただし、IEはそれをサポートしていないことに注意してください。

この例では、display：noneを適用する代わりに、 color：＃ff0000を適用して、結果を評価できるようにしました。表示する必要のあるLI要素の数を4に置き換えます。

<style> 
     ul li:nth-child(1n+4)
     {
       color:#ff0000;
     }
 </style>


<ul> 
  <li> a </li>
  <li> b  </li>
  <li> c </li>
  <li> d</li>
  <li> e </li>
  <li> f </li>
  <li> g </li>
 </ul>
于 2013-02-18T12:24:14.680 に答える