.onクリックすると、「E」

Question

私がクリックされたアイコン<i>

次のレジスタクリックOKに最も近い<h4>内のテキストを取得しようとしていますの.closestを返しませんが、それは戻りません。 h4内の値。代わりに、それはCodepenのためにあまりにも長い間、あなたが見ることができるような詳細の非常に長い配列を返します。どこが間違っつもり

<p class="icon heart"> 
    <i>icon</i> 
</p> 
<h4>this text</h4> 


$('body').on('click', '.icon.heart i', function(e){ 
    var property = []; 
    console.log('clicked!'); 
    console.log($(e).closest(".intro-text h4")); 
}); 

？

http://codepen.io/franhaselden/pen/pboYvZ

EDIT：

私は私のコードのレイアウトをより代表するHTMLを更新しました。 <h4>のコンテンツにアクセスするにはどうすればよいですか？

https://jsfiddle.net/0jsxjqzx/3/

Answer 1

あなたの最初の問題はe Eventオブジェクトではなく、DOM要素であるということです。

あなたは、おそらく、あなたは、あなたが質問にHTMLを含めることができなかったので、私は最初は気付かなかった第二の問題を（持っている、私はあなたのためにそれを固定thisかe.target

---

を意味します）。

the documentation of closestを見：セット内の各要素について

、要素自体をテストし、DOMツリー内のその先祖を通って上に横断することにより、セレクタに一致する最初の要素を取得します。

h4はイタリック体の祖先ではありません。それは見つからないでしょう。

段落に移動し、代わりにその兄弟を見つける必要があります。

$(this).closest("p").next("h4"); 

Answer 2

最後のconsole.logに閉じ括弧がありませんでした。
h4はi,の親ではないので、closestは機能しません。nextAllを使用するとよいでしょう。

jQuery(document).ready(function() { 
    $('.iconheart').on('click', function(){ 
     var property = []; 
     console.log('clicked!'); 
     console.log($(this).nextAll("h4").html()); 
    }); 
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p class="iconheart"> 
    <i>icon</i> 
</p> 
<h4>this text</h4> 

Answer 3

あなたはこのようにそれを行うことができます：あなたは要素が良く `として表現されるだろう` `だhttps://jsfiddle.net/cn8trrhn/