在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>

如果clicked元素不一定是您关注的索引集中的<p>之一，则可以按照类似的方法，通过在列表中构造 all 元素的集合HTML，在集合中找到被单击元素的索引，从该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>

Answer 2

.index()和.eq()

假设每个.error有一个.click，我们可以：

• 收听任何.click
的点击
• 找到与文档上所有.click相关的点击的.click索引号
• 然后使用该索引号在文档上的.error中查找等效的索引号。

---

演示

演示中评论的详细信息

/*
- Register click event on document
  - Any .click clicked will be $(this)
- Get the index number of the clicked button in relation to
  all .click on the document.
- Use the same index number to find the associated .error
*/
$(document).on('click', '.click', function(e) {
  var idx = $(this).index('.click');
  $('.error').eq(idx).show();
});

.error {
  display: none
}

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

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

CSS

Here is your playground