Пройдите по следующей оси в 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>

Я хотел бы найти следующий p с классом target, не имеет значения, на каком уровне DOM нажат p с помощью clickкласс есть.В случае 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 s, вы можете проверить .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> в коллекции, индекс которой вас интересует, вы можете воспользоваться аналогичным методом, создав коллекцию из всех элементов в HTML, найдя индекс выбранного элемента в коллекции, создание новой коллекции, начиная с этого index + 1, filter ing 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()

Предполагая, что для каждого .click есть .error, мы можем:

• прослушайте щелчок по любому .click
• , найдите индекс 1011 *, по которому щелкнули, относящийся ко всем .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

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

Вот ваша игровая площадка