2

デフォルトですべてが非表示になっている項目のリストでは、最初の項目にはliofdisplayがありblockます。問題は、最初の要素が削除された場合、これが更新されず、事実上、表示されるべき新しい最初の子が作成されることです。Safari では、li表示されるはずの新しいものが表示されません。

HTML

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<button>click me </button>

CSS

.list .item { display: none } 
.list .item:first-child { display:block}

JS

$('button').on('click', function(e) {
  $('ul li:first').remove().appendTo($('ul'));
});

フィドルを参照してください: http://jsfiddle.net/BFTan/1/

他のすべてのブラウザーでは、ボタンをクリックするとアイテムが循環しますが、Safari では何も更新されません。

4

1 に答える 1

4

これは、セレクター自体の Safari の処理に固有の問題ではなく、display: noneを使用したときに現れるドキュメント ツリーから削除されたオブジェクトの問題のようです。:first-child:first-child

いずれにせよ、これは間違いなくバグです。オブジェクト (およびその内容) を親から切り離しても、jQuery はオブジェクトを破棄しませんが、要素を親から切り離すと、n の値に関係なく、親の n 番目の子になることはなくなるため、次の要素はそれが最初の子になり、それに応じて一致する必要があり:first-childます。

一度に 2 つの要素が表示されるよう:first-childにコードを に変更すると、Safari でボタンをクリックすると、最初の要素が消え、2 番目の要素はそのまま残ります (3 番目の要素はそのまま残ります)。まだ隠されています）。:not(:last-child)

:emptyまた、リスト自体にセレクターを使用して新しい空のルールを追加すると、次のことがわかりました。

/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}

すべてが突然Safari で正しく動作するようになります。さらに奇妙なのは、この回避策が他のレベル 3 疑似クラスでは機能しないことです。:emptyまたはでのみ機能し:not(:empty)ます。

于 2013-03-08T19:46:42.177 に答える