在 DOM 中遍历跟随轴

Question

This is a DOM fragment.

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

I would like to find the next p with the target class, it doesn't matter on what DOM level the p pressed with the click class is. In the case p with value 2

Something like

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

But I can not find how to traverse the following axis in the DOM, except, maybe, xpath which does not work in all browsers.

It would be great if I don't know something :)

EDIT

I was not correct enough writing the question. More suitable code is below. After pressing click I want to get the first error after

<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

By retrieving all p s initially, you can check the .index of the clicked element ( this ) in the collection. Then, access index + 1 in that p collection:

 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>

If the clicked element is not necessarily one of the <p> s in the collection whose index you care about, you can follow a similar method by constructing a collection of all elements in the HTML, finding the index of the clicked element in the collection, constructing a new collection starting from that index + 1 , filter ing by p , and checking the first matching element:

 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()

Assuming that there's an .error for each .click , we can:

• listen for a click on any .click
• find the clicked .click index number relating to all .click on the document
• then use that index number to find the equivalent index number among the .error on the document.

---

Demo

Details commented in demo

 /* - 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
});

Here is your playground