セレクタの指定の仕方（親の親の親の２番目の子供）

Question

$('#hoge').parent().parent().parent().find('#fuga').append('<p>ほげ</p>');

と同じセレクトをしたく(#fugaはdivの２番目）次のようにしてみたのですが、正しくセレクトできません。

$('#hoge').parent().parent().parent(div:nth-child(2)).append('<p>ほげ</p>');

div:nth-child(2)の使い方が悪いと思うのですが、ぐぐってみても複雑な場合のdiv:nth-childが見つけられず、こちらに質問させていただきました。

どうぞ、よろしくお願いいたします。

Answer 1

これでもよいかも

  console.log($('#hoge').parent().parent().parent().children().eq(1).attr('id'));

eqは0番目からデータを取るので、2番めはeq(1)

Comments

[yoshipu]

ありがとうございます。
最後のattrは使いませんでしたがうまくできました。

Answer 2

文字列として渡すための引用符がないことはとりあえず置いておくとします。

そして、div:nth-child(2)と書くと、「div」かつ「nth-child(2)」であるもの、つまり「ある親要素の2番めの子供となっているdiv」という意味になります。

「divの2つ目の子供」を意味するセレクタは、div > :nth-child(2)となります。

Comments

[yoshipu]

ありがとうございます。大変参考になりました。