Question

我在具有相同ID的页面上有两个UL。我想在第二届UL中针对第五名。有可能做这样的事吗？

HTML：

<ul id="homepage-blockpaging">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>

<ul id="homepage-blockpaging">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>

建议jquery：

$('#homepage-blockpaging:eq(1) li:eq(4)').after('<li>New Item</li>');

首选结果：

<ul id="homepage-blockpaging">
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
<li>New Item</li>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>

Answer 1

你可以使用$("ul")[1]

找到第二个ul

然后，要查找第5个li，您可以使用jQuery find()方法和:eq但是要使用它们，您必须将其转换回jQuery对象。

所以，最后你会得到类似的东西：

$($("ul")[1]).find("li:eq(4)").after('<li>New Item</li>');

Answer 2

首先，您要将homepage-blockpaging更改为某个类，因为您在HTML中不能拥有两个具有相同ID的元素！

然后，你可以用这种方式完成你想要的东西：

$(".homepage-blockpaging:eq(1)") // get 2nd ul
    .find("li:eq(4)") // get the 5th li inside it
    .after( // create a new li element
        $("<li>")
            .text("New Item")
    );

Here是一个演示。

针对第2名儿童和第5名儿童

2 个答案: