Question

我有一个div id（拍卖），我想用拍卖清单的孩子换掉HTML。但是，jQuery无法选择拍卖列表div的子节点。

这是HTML：

<div id="all">      
    <div id="auctions"></div>
</div>

<div id="auction-list" class="hide">
    <div class="auction">Test</div>
    <div class="auction">Test</div>
</div>

这是jQuery：

alert($("#auction-list").children().length);
alert($("#auction-list").html());
alert($("#auction-list:nth-child(1)").html());
alert($("#auction-list:nth-child(2)").html());
$("#auctions").html($("#auction-list:nth-child(1)").html());

以下是Javascript警报的输出：

第一次提醒

第二次提醒

<div class="auction">Test</div>
<div class="auction">Test</div>

第三次提醒

null

我在这里俯瞰什么？

Answer 1

您的选择器之间需要一个空格，如下所示：

alert($("#auction-list :nth-child(1)").html());
//                    ^-- Space here

使用你的选择器，它正在寻找元素#auction-list，它是另一个元素的第一个子元素，当你实际上在寻找一个元素是列表的第n个子元素时。

Answer 2

我认为您不应该在元素ID上使用:nth-child选择器。它应该是一个分类项目

等;

alert($("div.auction-item:nth-child(1)").html());

Answer 3

尝试以下方法：

$("#auction-list > .auction:nth-child(2)")

看看docs。您正在尝试选择第n个#auction-list元素而不是其子元素。

Answer 4

alert($("#auction-list").children().length);
alert($("#auction-list").html());
alert($("#auction-list div:nth-child(1)").html());
alert($("#auction-list div:nth-child(2)").html());
$("#auctions").html($("#auction-list:nth-child(1)").html());

Answer 5

我遇到了一个问题，即点击事件会在IE和Chrome中点亮而不是firefox。我忽略了一个错字。以为我会分享以防万一。

 $(document).ready(function () {
    $(".test table tr:nth-child(1n+2").click(function () {
            alert(this.id); 
        });
});

我错过了+2之后。

JSFiddle：https://jsfiddle.net/xv3bca60/7/

jQuery nth-child选择器无法正常工作

5 个答案: