在jQuery中向后匹配元素的第一次出现

Question

我有一个包含一些表单的页面。在提交时，我想匹配第一次出现的元素（即段落）向后搜索表单。例如

• 在#firstform提交我想匹配 #secondparagraph
• 在#secondform提交我想匹配 #thirdparagraph

<div>
  <p id="firstparagraph">Some other paragraph</p>
  <ul>
    <li>First element</li>
    <li>Second element</li>
  </ul>
  <p id="secondparagraph">Some other paragraph</p>
</div>

<form id="firstform">
  <input type="submit" value="Submit1" />
</form>

<p id="thirdparagraph">Some other paragraph</p>

<form id="secondform">
  <input type="submit" value="Submit2" />
</form>

是否可以创建一个向后搜索并在第一次匹配时停止的 jQuery 函数？

Answer 1

你可以这样做：

var p = $(this).parents().addBack().prevAll().find('p').addBack('p').last();

demonstration

这个想法是从所有父母的前兄弟姐妹中收集一个集合，并在这个（大）集合中搜索最后一段。

Answer 2

我认为jQuery按照我们阅读代码的顺序遍历元素，所以你可以试试这段代码，为了演示，我什至添加了一些嵌套的p元素，但可能不是你的情况。这适用于您拥有的任何 HTML 结构：

var token = 'abd432432efdfsdfe42342398kjkfljsdlkfjs';
$('input').click(function(e){
  $(this).wrap($("<p>").attr('id',token));
  var p;
  $('p[id]').each(function(i){        
    if($(this).attr('id') == token) return false;        
    p = $(this);
  });
  $(this).unwrap();
  //try showing the id of the matched p element
  alert(p.attr('id'));
  e.preventDefault();
});

Demo.

我们应该只搜索具有id 属性（或其他符号）的p 元素，因为浏览器有时会插入一些空的p 元素，因此会出现意外结果。

Answer 3

如果您只是在寻找 (type) 的最后一个元素，:last 选择器就是您要寻找的。它匹配元素的最后一次出现。所以

$("p:last")

会得到最后一段。

但是我理解它的方式，你想在另一个元素之前获取最后一个元素（在你的情况下，点击提交按钮），有几天的时间来做。我会使用类似的东西

$(myElement).prevAll('p:first');

您使用了类似的选择器，但现在它只影响提交元素之前的 DOM 元素（或您想要使用的任何元素）。您使用:first 而不是:last，因为prevAll() 以相反的顺序获取元素列表。

JSfiddle demonstrating this