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

- Liam

---

哪个元素？对它做什么？在这里展示你的代码。JS Fiddle是一个不错的额外选择，但你的问题应该有意义，并且不依赖于外部网站也能保持其有用性。 - David Thomas

我认为你想使用“h2”作为closest()的参数。 - Christian

$(this).closest('li').find('h2') - zerkms

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 演示。

参考：

• closest() 方法。
• find() 方法。
• parent() 方法。

- David Thomas

---

谢谢@David Thomas，我看到它在jsfiddle上可以工作，但是在我的实际网站上却不行，在页面加载时，表单最初是display:none的，只有在单击一个按钮以切换其视图后才变为可见，这可能是原因吗？ - Liam

我不清楚，要回答那个问题，我们需要看看你的网站，并对其中发生的事情有一些了解。 - David Thomas

我看到它在 jsfiddle 上可以运行，但在我的实际网站上却不行。现在轮到你来让它正常工作了。我们在这里是为了了解如何做到这一点，而不是为你做所有的事情。 - zerkms