How to organize efficient DOM manipulation with jQuery in context?

Question

JavaScript

Let's say there is a page with posts. Each post has its own HTML markup. So each post has a like button, when clicked, jquery sends an ajax request. Upon successful completion of the request, you need to update the state of the current post. But how to get access to the elements of the current post (i.e., taking into account the context in which the like button is located), if the class names are the same for all?. Now I do it like this:

$(this).parent().parent().parent().prev().prev().find('i').addClass('w3-text-red');

Those. I stupidly calculate where to go from the current element to the desired one and call the parent, prev, next functions.
I am sure that this is not very correct (but intuitive).

Answer 1

api.jquery.com/closest