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(请记住，我必须用 ul 包装 li，因为未包装的 li 是无效的 HTML ):

<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');
});

您似乎正在尝试在 li 中查找 h4。您遇到的问题有很多:

1. 使用parent()仅查找当前元素的直接父元素；使用 closest() 来代替，查找祖先直到找到匹配的元素，
2. closest() (如上所述)在您尝试在 li< 的后代元素中查找元素时，向上查找祖先元素 元素。使用find(),
3. 您正在搜索 h4 元素，但该元素不存在。您需要(我认为)找到 DOM 中存在的 h2。

所以:

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

JS Fiddle demo .

引用文献:

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