javascript - jQuery 保存コンテキスト onclick

Question

$(this)コンテキストをその子の固定された親に向けながら、要素の子にクリックリスナーをバインドする方法はありますか? たとえば、私がページを持っていたとしましょう -

HTML:

<p><div data-important="idthatisneeded1" class="fixedClass">
<div id="dynamicallygeneratedfirstchild">
<div id="dynamicallygeneratedsecondchild">
<a class="clickabblelinkfromtheparent" href="#">Link1</a>
</div>
</div>
</div></p>
<p><div data-important="idthatisneeded2" class="fixedClass">
<div id="dynamicallygeneratedfirstchild">
<a class="clickabblelinkfromtheparent" href="#">Link2</a>
</div>
</div></p>

fromがクリックされるたびに、使用せずに、または両方とも信頼できないため、 data-importantfromの値を取得したい-.fixedClass.clickabblelinkfromtheparent.parent().parent().parent()

JS:

$(".fixedClass .clickabblelinkfromtheparent").on("click",function(){alert($(this).parent().parent().data("important"));return false;});

http://jsfiddle.net/zcdSw/

私も試しました：

$(".fixedClass .clickabblelinkfromtheparent").on("click",function(){alert($(this).context(".fixedClass").data("important"));return false;});

http://jsfiddle.net/zcdSw/1/

$(".clickabblelinkfromtheparent", ".fixedClass").on("click",function(){alert($(this).data("important"));return false;});

http://jsfiddle.net/Q8a67/ および

$(".clickabblelinkfromtheparent", ".fixedClass").on("click",function(){alert($(this).context);return false;});

http://jsfiddle.net/Q8a67/1/

どれもうまくいかないようです..では、これはjQueryでどのように達成できるのでしょうか?

Answer 1

あなたはこのようなことを試みていますか？jsfiddle: http://jsfiddle.net/zKp3P/

$(function(){
  $('.clickabblelinkfromtheparent').on('click', function(){
    //$(this).closest('.fixedClass').data('important');
    alert($(this).closest('.fixedClass').data('important'));
  });
});

Answer 2

$('.clickabblelinkfromtheparent').on('click', function(){
    alert($(this).closest('.fixedClass').data('important'));
});

Answer 3

DOM ツリーの祖先の最初のデータにとって重要な属性値を取得するには、次のスニペットに基づいて何かをツリー化できます。

function searchDataInParentAxe($child, key) {
  var parent = $child.parent();
  return parent.data(key) || searchDataInParentAxe(parent, key);
}

$(".clickabblelinkfromtheparent").on("click", function () {
  alert(searchDataInParentAxe($(this), 'important'));
  return false;
});

http://jsfiddle.net/zoom/2mhSQ/

このメソッドでは、fixedClass はもう必要ないことに注意してください。