javascript - 使用 jquery 获取不是直接同级、父级等的前一个元素

Question

这个问题已经有答案了:

How can I find the closest previous sibling with class using jQuery? (5 个回答)

已关闭 8 年前。

例如:

  <h1 class="title">This is a title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">This is a totally different title</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

  <h1 class="title">and this is another title still</h1>
  <p>Post body text</p>
  <p class="postfooter">Today's date: blah. posted by: blah</p>
  <button>Do stuff</button>

我想要的是当用户单击按钮时，相应的标题会向下滑动。

到目前为止，我已经尝试过类似的方法(尽管我也尝试过closest()、parent()、sibling()等的不同组合):

$("button").click(function(){
  var currentTitle = $(this).????(".title").text();
  $("playerTitleNormallyHidden").slideDown(500).delay(2000).slideUp(500);
});

我确信这可能非常简单，但我被困住了。

Answer 1

您可以使用prevAll()

$("button").click(function(){
  var currentTitle = $(this).prevAll(".title").text();
  $("playerTitleNormallyHidden").slideDown(500).delay(2000).slideUp(500);
});

prevAll() 将

Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector.

更新

由于您在 prevAll 之后立即使用 text()，因此您需要限制您想要的前一个同级。否则，您的输出将是来自之前 .title 元素的 ALL 文本。

可以通过使用:first修改我们的选择器来避免这种情况。这将使我们获得距离按钮最远的第一个元素

var currentTitle = $(this).prevAll(".title:first").text();