jQuery:如何选择父元素下的所有P子元素?

5

html:

<style>
   hidden { display:none;}
</style>

<div id="div1">
  <a href="#" onclick="expandSiblingParagraphs(this)">+</a>
  <p>Hello</p>
  <p class="hidden">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Integer vulputate, nibh non rhoncus euismod, erat odio pellentesque lacus, 
    sit amet convallis mi augue et odio. Phasellus cursus urna facilisis quam.
    Suspendisse nec.</p>
  <p class="hidden">Another hidden paragraph</p>
</div>

我正在尝试的Javascript代码:

var expandSiblingParagraphs = function(elt){
  $(this).parent()....?
};

我希望选择所有被点击元素的父元素下的P标签,并将它们的隐藏类去掉。在逻辑上,我不想假设包含div的id,甚至不确定是否有包含div。我只需要父容器中所有的P子元素。
如何实现呢?
选择器语法中,我可以找到获取后代或子元素的方法,但是我找不到选取父元素或祖先元素的方法。我错过了什么吗?谢谢。
2个回答

16
$(this).parent().children("p.hidden").removeClass("hidden");

3
这将找到所有直接子级的 P 标签。$("div p") 将找到所有 DIV 标记中的 P 标签,无论它们的层次结构如何。 - Doug Domeny

0

我喜欢使用closest,因为它可以向上冒泡:

$(this).closest("div").find("p").show()

或者考虑:

$(this).siblings("p").show();

[更新] 根据下面的评论和其他答案:

$(this).siblings("p.hidden").removeClass("hidden");

.show()方法不会移除类属性,但是closest()方法通常是一个好主意。 - Doug Domeny
你介意详细说明一下为什么你认为这样做更好吗?这看起来很有趣,但我还没有在其他地方看到过这种方法。 - T. Stone
closest 的问题在于您假设存在一个 div,而 OP 并不想要。然而,兄弟元素是一个好主意。 - Joel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接