Question

我有一些像这样的HTML：

<article>
  <aside>
    <p class="target-goal">This is my goal to target, which is initially hidden.</p>
  </aside>
  <header>
    <h1>Title</h1>
    <time>5:00</time>
  </header>
  <a href="somewhere.php" class="toggle">Show Target</a>
</article>

当我点击.toggle我可以显示p.target-goal时，我正试图这样做。

这是我一直在尝试的jQuery，以及使用最接近等的几种变体：

$('.toggle').click(function(e) {
e.preventDefault();
$(this).prev('aside').children('.target-goal').slideToggle();
});

关于我可能做错的任何想法？

Answer 1

试试这个：

$('.toggle').click(function(e) {
   e.preventDefault();
   $(this).closest('article').find('aside').find('.target-goal').slideToggle();
});

Answer 2

试试这个：

$('.toggle').click(function(e) {
    e.preventDefault();
    $(this).closest('article').find('.target-goal').slideToggle();
});

你的方式失败是因为.prev()查看了前一个兄弟，在你的情况下是一个标题元素。但是，您可以完成.prev().prev()，但我建议改为.closest()。

<强> jsFiddle example

Answer 3

.prev选择前一个元素，因此它会选择header，因为您传递了一个参数（aside）并且它们不匹配，所以它不返回任何内容。 / p>

你可以使用兄弟姐妹：

$(this).siblings('aside').children('.target-goal').slideToggle();

或prevAll：

$(this).prevAll('aside').children('.target-goal').slideToggle();

或最近/找到：

$(this).closest('article').find('.target-goal').slideToggle();

Answer 4

$('.toggle').click(function(e) {
 e.preventDefault();
 $(this).parents('article').find('.target-goal').slideToggle();
});

JQuery在上一个最近的元素中选择一个子元素

4 个答案: