Question

我正在通过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>

现在我想使用jQuery .remove（）因为我想只显示前3个项目。上面的HTML只是示例，实际上每个项目都有很多HTML代码，所以我想使用jQuery .remove（）而不是CSS display：none。

我这样做：

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

这只适用于Chrome，但不适用于Firefox或IE，我可以看到所有5个项目。

有什么建议吗？

Answer 1

要确保代码仅在加载元素后运行，您应该将其放在传递给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-wrapper和genericItemView类的元素。 / p>

Answer 2

您可以使用load()方法的成功回调来编写dom操作

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

Answer 3

将genericItemList更改为genericItemView

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

Answer 4

将您的班级名称genericItemView更改为genericItemList。

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

See Demo

Answer 5

将其$(".module-wrapper.genericItemView:gt(2)").remove();更改为$(".module-wrapper .genericItemList:gt(2)").remove();

Answer 6

在.genericItemList

之前添加空格

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

.remove（）无法在IE和Firefox中运行

6 个答案: