jquery - eq セレクターが機能しない

Question

次のセレクターで 2 つの 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、2 番目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>'); ​

例

---

または、1つの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());