1

列に表示されるように、フロートを残したアイテムdivがいくつかあります。ユーザーは任意のアイテムで「非表示」をクリックできます。これにより、その要素に「.hide」クラスが追加されます。このクラスには、display:none css があります。

質問:方法はあります.item:not(.hide):nth-child(2n+2)か? そのため、アイテムのリストの .hide が途中にある場合でも、ルールは適用され、その.hideアイテムは「無視」されます。

jsbin のライブ例、http://jsbin.com/ajeqal/edit#javascript,html,live

右側の列アイテムで「非表示」をクリックすると、左側の列は常に右側の列とは異なる背景色を持つ必要があるという意味で、列の順序が乱れます。非表示のアイテムをリストの最後に移動することもできますが、それはより多くの作業です。

HTML:

<style>
  .hide { display:none;}
  .item{ float: left; width: 150px; padding: 5px; background: #ccc;}
  .item:not(.hide):nth-child(2n+1) { background: #999; margin-right:5px }
  .item a { display:inline-block; margin-left: 10px; }
  body { width: 325px; }
  #unhideAll { display: none; clear: left; margin-top: 20px;}
  #container { overflow: auto; }
</style>
<body>
  <div id="container">
  <div class="item">item<a href="#">hide</a></div>
  <div class="item">item<a href="#">hide</a></div>
  <div class="item hide">item<a href="#">hide</a></div>
  <div class="item">item<a href="#">hide</a></div>
  </div>
  <div id="unhideAll"><a href="#">Unhide All</a></div>
</body>

J:

$('#unhideAll').click(function(e) {
  e.preventDefault();
  $(".hide").removeClass("hide");
  $(this).hide();
});

$(".item a").click(function(e) {
  e.preventDefault();
  $(this).parent().addClass("hide");
  $("#unhideAll").show();
});
4

4 に答える 4

1

これを行うための css セレクターはありません。代わりに、すべての「.hide」要素を取得し、それらすべてを含む div に appendTo して、基本的にすべてを最後に移動する必要があります。これを行うと、それらは他のアイテムと混ざり合わなくなります。

于 2012-06-11T20:02:20.350 に答える
1

グループのフィルタリングされた選択を操作する場合、n 番目の子は直感に反する可能性があります。

.each() を使用して、その制限を回避します。

var count = 0;
$('.item:not(.hide)').each(function(){
    if ( count++ % 2 == 1 ) $(this).css('background-color','#999')
})
于 2012-10-26T05:02:22.020 に答える
0

試しました.item:not(.hide):nth-of-type(2n+2)か？確認するためにいくつかのテストを行うつもりですが、一見するとうまくいくようです。

于 2012-06-11T19:42:41.260 に答える
0

まず、代わりに nth-child(odd) と言うことができます。

次に、試してみたい場合は、notHidden クラスを追加してみることもできます (最初はすべてのクラスが含まれます)。次に、(理論上) .notHidden で nth-child を実行できます。

他の人が言っているように、あなたが現在行っている方法は nth-child が削除されたとは見なさないため機能しません。

于 2012-06-11T19:27:58.433 に答える