jquery - 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) ）都被“Top 5 Photos”取代，我不知道为什么以及如何解决这个问题。

对于解决此问题的任何帮助，我将不胜感激。

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就变成了firstie eq(0)。因此，您永远无法获得索引为 2 的 h3 即eq(2)。

演示

你也可以试试这个：

var replaces = ['<div>FIRET</div>', '<div>SECOND</div>'];
$('#content div div ul h3').each(function(index, val) {
    $(this).replaceWith(replaces[index]);
});

演示

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>'); ​

例子

---

或者请记住，您只需替换一个 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>'); ​

例子

Answer 3

试试这个;

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

还要检查数量；

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