自身のかなり上方の祖先である親は、そのまた親要素で何番目なのか?
親の親は何番目?という簡単そうで難しかった・・・
くだらない事で2日も費やしたのでメモ・・・
こんな環境のHTMLである
<div "~~何処か~~">
<div class="oya_no_oya">
<div class="uenohouno_oya">
<div>....(div が何階層もあるイメージ)
<div class="targetChilled">対象の子供<div>
</div>.... (何階層もあるのを終了する)
</div>
</div>
</div>
上記の様な構図で、子供である.targetChilled がクリックされたときなどに、
その
子供が含まれる.uenohouno_oya 要素はoya_no_oya 要素で何番目なのか?
という事が知りたい!!!
○まずミスケース、removeからテストしていたので
$('.export-rule-delete-button').click(function (){
$(this).parents('.uenohouno_oya').
remove();
alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya')));
}
this ポインタを使いたい場合には、this はremove などが
入っているとthis の内容まで変化して使えなくなっていることに気がつかなかった・・・(2日も)
○動く様にすると
$('.export-rule-delete-button').click(function (){
alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya')));
$(this).parents('.uenohouno_oya').
remove();
}
やはりremove は後でなければいけない、もしくは$(this)を
thisObj =$(this)で変数にでも入れて、保存して、それを用いれば
this の値が変わっても使える
○あまり意味があるかどうか分からないが
$('.export-rule-delete-button').click(function (){
alert($('#export-rule-item-area').children('.uenohouno_oya').index($(this).parents('.uenohouno_oya')
.get(0)));
$(this).parents('.uenohouno_oya').remove();
}
.get(0) を追加しておいてみた、理由は
$(this).xxx() で取得した内容は、add()などを含み、ほぼ多くの場合で
中身がdocument 要素から取得したDOMではないので、
オブジェクトの比較に使えない場合もあるかもしれない場合も
もしかしてあるかもしれない?と思ったから、でも必要無いかも。
○動く様にすると
の部分で完成でいいかもしれない。
参考(結果的にあまり使わなかったが良かった参考リンクメモ)
jQueryオブジェクトの比較
jqueryオブジェクトを比較する時はDOMエレメントを比較しよう
JavaScript - jQueryオブジェクトの比較 - Qiita
jQueryオブジェクトの比較 - paranitips
追伸:
これ、また続きを作りました・・・済みませんorz
遠い祖先(親の親xn)から見た その子の要素は何番目かを知る(jQuery)
というか、次のブログへ見に行ってもらうのも気が引けるので
結果だけこっちにも残します(詳しくなんでこうなったか知りたい方は上記をどうぞ^^;)
以下結果
↓↓↓↓↓↓↓↓↓↓↓↓↓↓
/* 遠い祖先(親の親xn)から見た その子の要素は何番目かを知る */
function progenitorChildrenIndex(progenitorName, childName, thisValue){
return thisValue.parents(progenitorName).children(childName).index($(thisValue).parents(childName).get(0));