使用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()(如前所述)查找了通过祖先元素,而你试图找到的后代中有一个元素li的元素.用find(),
3. 您正在搜索h4不存在的元素.您需要(我假设)找到h2DOM中存在的内容.

所以:

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

JS小提琴演示.

参考文献:

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