使用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. 使用parent()仅查找当前元素的直接父元素;使用closest()来查找祖先，直到找到匹配的元素，
2. closest()（如上所述）通过祖先元素查找 up ，同时您尝试在li元素的后代中查找元素。使用find()，
3. 您正在搜索不存在的h4元素。您需要（我假设）找到DOM中存在的h2。

所以：

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

JS Fiddle demo

参考文献：

• closest()。
• find()。
• parent()。