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（请记住，我必须用 包装li，ul因为未包装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');
});

看来您正试图h4在li. 您遇到的问题是多方面的：

1. usingparent()只查找当前元素的直接父元素；改为使用closest()，通过祖先查找，直到找到匹配的元素，
2. closest()（如前所述）在您尝试在元素的后代中查找元素时查找祖先元素li。使用find(),
3. 您正在搜索一个h4不存在的元素。您需要（我假设）找到h2DOM 中存在的内容。

所以：

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

JS 小提琴演示。

参考：

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