0

次のように jQuery .load() メソッドを使用して div 要素をロードしています。

$(document).ready(function() {
    $(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList");
});

それを通して、アイテムのリストを取得します.5つとしましょう。

<div class="module-wrapper">
    <div class="genericItemList">
        <div class="genericItemView">Item 1</div>
        <div class="genericItemView">Item 2</div>
        <div class="genericItemView">Item 3</div>
        <div class="genericItemView">Item 4</div>
        <div class="genericItemView">Item 5</div>
    </div>    
</div>

最初の 3 つの項目だけを表示したいので、jQuery .remove() を使用したいと思います。上記の HTML は単なる例です。実際には、各アイテムには多くの HTML コードが含まれているため、CSS display:none の代わりに jQuery .remove() を使用したいと考えています。

私はこのようにします：

$(window).load(function() {
    $(".module-wrapper .genericItemView:gt(2)").remove();
});

これは Chrome でのみ機能しますが、5 つの項目すべてを表示できる Firefox や IE では機能しません。

助言がありますか？

4

6 に答える 6

2

要素がロードされた後にのみコードが実行されるようにするには、 load()に渡されるコールバック関数にコードを配置する必要があります。

$(document).ready(function() {
    $(".module-wrapper").load(
        "index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList",
        function() {
            $(".module-wrapper .genericItemList:gt(2)").remove();
        }
    );
});

クラスセレクターも間違っている可能性があります。上記のコードで修正しようとしました。.module-wrapperクラスを公開する の子孫に一致させたいようですが、元のセレクターはとクラスgenericItemListの両方を公開する要素に一致します。module-wrappergenericItemView

于 2013-03-28T12:57:52.073 に答える
1

.genericItemList の前にスペースを追加

$(".module-wrapper .genericItemList:gt(2)").remove();
于 2013-03-28T13:02:16.553 に答える
1

クラス名 genericItemView を genericItemList に変更します。

$(".module-wrapper .genericItemList:gt(2)").remove();

デモを見る

于 2013-03-28T13:01:09.650 に答える
1

メソッドの成功コールバックを使用して、load()dom 操作を記述できます。

$(document).ready(function() {
    $(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList", function(){
        $(".genericItemView:gt(2)", this).remove();
    });
});
于 2013-03-28T12:58:03.257 に答える
1

genericItemListに 変更genericItemView

 $(".module-wrapper .genericItemView:gt(2)").remove();
于 2013-03-28T12:59:54.943 に答える
1

に変更$(".module-wrapper.genericItemView:gt(2)").remove();します$(".module-wrapper .genericItemList:gt(2)").remove();

于 2013-03-28T13:01:32.700 に答える