javascript - なぜ要素が彼の親から削除されるのですか？

Question

リンクhttp://jsfiddle.net/KvscH/6/を確認してください。

inspect elementアニメーションでSPANがLI全体にあることを確認できますが、なぜこれが発生するのかわかりませんでした。SPANをLI内に保持したいと思います。

ヘルプをいただければ幸いです:)

Answer 1

使用されているjavascriptが原因です。

javascript の次の行により、Boo1 が初めて表示されます。

ticker.children(':first').show().siblings().hide();

を呼び出すとshow()、 が削除されdisplay:noneます。同様にまたはhide()を追加します。firebug を使用して、適用されたスタイルを確認できます。display:nonevisibility:hidden

注:li{display:none} CSS からを削除すると、同じ機能が得られます。

Answer 2

あなたはこの後だと思います：http://jsfiddle.net/TmNLE/

var ticker = $('ul.ticker');
var tickerli = $('ul.ticker li');
ticker.children(':first').show();

$('.next').live ('click', function () {
    $('li:visible').fadeOut(function() {
       $(this).appendTo(ticker);
       ticker.children().first().show();
    });
});

$('.prev').live ('click', function () {
    $('li:visible').fadeOut(function() {
       ticker.find('li:last').insertBefore(ticker.find('li:first'));
       ticker.children().first().show();
    });
});

Answer 3

このインライン スタイルが適用され、CSS の仕様によりオーバーライドされます。

display: list-item;

特異性を高める 1 つの方法は、以下を使用することです。

.ticker li {
    display:none !important;
}​

Answer 4

コードをデバッグして、適用したスタイルを確認してください。

この問題は、コード内の次の JavaScript 行が原因です。

ticker.children(':first').show().siblings().hide();

この行を追加

ticker.children(':first').show();