javascript - 遍历 DOM 中的跟随轴

Question

这是一个 DOM 片段。

<p class="target">1</ p>
<p class="click"></ p>
<table>
<tr><td><p class="click"></p></td></tr>
</table>
<p class="target">2</p>

我想用 target 类找到下一个 p，用 click 类按下的 p 是什么 DOM 级别并不重要。在 p 值为 2 的情况下

有点像

$ ("p.click").click(function () {
target = $(this).following("p.target").first()
});

但我找不到如何在 DOM 中遍历以下轴，也许 xpath 除外，它不适用于所有浏览器。

如果我什么都不知道那就太好了:)

编辑

我写的问题不够正确。更合适的代码如下。按下 click 后，我想得到第一个 error 之后

<input class="click" type="button" value="1">
<p class="error"></ p>
<table>
<tr><td><input class="click" type="button" value="2"></td></tr>
</table>
<p class="error"></p>

Answer 1

通过检索所有 p最初，您可以检查 .index集合中单击的元素 ( this)。然后，访问index + 1在那p收藏:

const $ps = $('p');
$("p.click").click(function() {
  const thisPIndex = $ps.index(this);
  console.log($($ps[thisPIndex + 1]).text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="target">1</ p>
  <p class="click"></ p>
    <table>
      <tr>
        <td>
          <p class="click">click</p>
        </td>
      </tr>
    </table>
    <p class="target">2</p>

如果点击的元素不一定是<p>之一s 在你关心其索引的集合中，你可以按照类似的方法构造一个包含 所有 元素的集合，在集合中找到被单击元素的索引，构造一个新的集合开始来自那个index + 1 , filter通过p ，并检查第一个匹配元素:

const $ps = $('p');
const allElms = $('*');
$(".click").click(function() {
  const thisElmIndex = allElms.index(this);
  const followingElements = allElms.slice(thisElmIndex + 1);
  console.log(followingElements.filter('p')[0].textContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="click" type="button" value="1">
<p class="error">1</p>
  <table>
    <tr>
      <td><input class="click" type="button" value="2"></td>
    </tr>
  </table>
  <p class="error">2</p>