Question

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

on #firstform提交我想要匹配 #secondparagraph
on #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

这个想法是从所有父母的先前的sibbling中收集一个集合，并搜索这个（大）集合中的最后一个段落。

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.

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

Answer 3

如果你只是在寻找（类型）的最后一个元素，那么:last选择器就是你要找的。它匹配元素的最后一次出现。所以

$("p:last")

会得到最后一段。

然而，按照我理解的方式，你想要在另一个元素之前得到最后一个元素（在你的情况下，点击提交按钮），有几天要做。我会使用像

这样的东西

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

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

JSfiddle demonstrating this

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

3 个答案:

Demo.