jquery - jQueryで親コンテナ内の要素を探す

Question

LI 内の要素をターゲットにしようとしているのですが、問題があるだけです。jQuery のドキュメントを読みましたが、何が間違っているのかわかりませんか?

クリックイベントで、要素を見つけて内部のhtmlを変更したい...

http://jsfiddle.net/68ePW/3/

<li>
    <h2>400</h2>
    <form>
        <input type='submit' class='click' value='send'>                
    </form>
</li>

$('.click').click(function(){
    $(this).parent('li').closest('h4').html('asdasd');
});

Answer 1

次の HTML に基づいています (ラップされていない HTML は無効であるため、liを でラップする必要があることに注意してください):ulli

<ul>
    <li>
        <h2>400</h2>
        <form>
            <input type='submit' class='click' value='send'>                
        </form>
    </li>    
</ul>​​​​​​​​​​​​​​​​​​

そして、次の jQuery:

$('.click').click(function(){
    $(this).parent('li').closest('h4').html('asdasd');
});

h4内でを見つけようとしているようですli。あなたが抱えている問題は複数あります：

1. を使用parent()すると、現在の要素の直接の親要素のみが検索されます。代わりに、一致する要素が見つかるまでclosest()祖先を検索するために使用します。
2. closest()（前述のように）要素の子孫の中から要素を見つけようとしているときに、祖先要素を調べますli。find()、_
3. h4存在しない要素を探していました。h2DOM に存在するを見つける必要がありました (私はそう思います) 。

そう：

$('.click').click(function(){
    $(this).closest('li').find('h2').html('asdasd');
});

JS フィドルのデモ。

参考文献:

• closest().
• find().
• parent().