eq选择器不工作

Question

使用以下选择器选择两个h3元素：

$("#content div div ul h3").css("border","1px solid red");

我需要按如下方式替换这些元素：

$('#content div div ul h3:eq(0)').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul h3:eq(1)').replaceWith('<div>Recent Photos</div>');      

我遇到的问题是两个元素（eq（0）和eq（1））都被“前5张照片”取代，我无法弄清楚为什么以及如何解决这个问题。

我将非常感谢您解决此问题的任何帮助。

Answer 1

试试这个：

$('#content div div ul h3:eq(0)').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul h3:eq(0)').replaceWith('<div>Recent Photos</div>');    

这个答案似乎有害，但我认为是正确的，因为当您第一次用h3替换div时，第二个h3变为first即{ {1}}。因此，你永远不能得到索引为2的h3，即eq(0)。

<强> DEMO

你也可以试试这个：

eq(2)

<强> DEMO

Answer 2

您错过了li

$('#content div div ul li:eq(0) h3').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul li:eq(1) h3').replaceWith('<div>Recent Photos</div>'); ​

Example

---

或者记住你只需要替换一个h3标签：

$('#content div div ul h3:eq(0)').replaceWith('<div>Top 5 Photos </div>');      
$('#content div div ul h3:eq(0)').replaceWith('<div>Recent Photos</div>'); ​

Example

Answer 3

试试这个;

$('#content div div ul h3').eq(0).replaceWith('<div>Top 5 Photos </div>');

还检查数量;

console.log($('#content div div ul h3').size());