Question

I am trying to create an array of all the elements to where the user clicked in a content editable div. I have this working with the following code.

 var els = [];
 var target = event.target;
 while (target){ //Create an array of parent elements
    els.push(target); //Push target to the back of the array
    target = target.parentNode; 
}

But I was wondering if I could reduce this to one line with jQuery. jQuery .parents() almost gets me there but it doesn’t include the first event.target

var els = $(event.target).parents();

Is there a way to include the element itself with .parents() or is there a better way of doing this?

Answer 1

How about andSelf ?

var els = $(event.target).parents().andSelf();

Mine would get you, great-grandparent, grandparent, parent, self.

If you want: self, parent, grandparent, great-grandparent, try extending Jquery with this:

$.fn.reverse = [].reverse;

and then doing:

var els = `$(event.target).parents().andSelf().reverse();

Example: jsFiddle