Question

尝试使用jquery选择先前的h4。基本上我有这样的东西：

<h4>THING I WANT 1</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

<h4>THING I WANT 2</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

<h4>THING I WANT 3</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

在我的JavaScript中，当单击其中一个按钮时，我试图使用以下命令直接在该按钮之前选择仅 h4文本：

$(this).prev("h4").text(),

这适用于第一个按钮（我猜是因为它紧随h4之后），但不适用于随后的按钮。 prevAll并不是答案（因为它会选择所有以前的H4），所以我有点困惑。

使用$（selector）.filter（）的逻辑，我的方法对我来说似乎很明智。将不胜感激。我很乐意将以上内容包装在div或其他有帮助的地方。

Answer 1

prevAll确实是答案，但是您必须选择集合中的第一个元素，否则将包含所有所有个先前的h4：

$('button').on('click', function() {
  const $h4s = $(this).prevAll("h4");
  console.log($h4s[0].textContent);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>THING I WANT 1</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

<h4>THING I WANT 2</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

<h4>THING I WANT 3</h4>
<button>One</button>
<button>Two</button>
<button>Three</button>

Answer 2

简单易行的是使用prevAll。

Sample JSFiddle

HTML：

  <h4>THING I WANT</h4>
 <button>One</button>
 <button>Two</button>
 <button>Three</button>

脚本

$('button').on('click', function()
 {
    var txt= $(this).prevAll('h4').text();
    alert(txt);
 });

用jQuery选择上一个元素？

2 个答案: