How to find the nearest common ancestors of two or more nodes?

Question

Users selects two or more elements in a HTML page. What i want to accomplish is to find those elements' common ancestors (so body node would be the common ancestor if none found before) ?

P.S: It can be achieved with XPath but it is not a preferable option for me. Also it may be found with css selector parsing but i think it is a dirty method (?)

Thank you.

Answer 1

Here's a pure JavaScript version that is a little more efficient.

function parents(node) {   var nodes = [node]   for (; node; node = node.parentNode) {     nodes.unshift(node)   }   return nodes }  function commonAncestor(node1, node2) {   var parents1 = parents(node1)   var parents2 = parents(node2)    if (parents1[0] != parents2[0]) throw "No common ancestor!"    for (var i = 0; i < parents1.length; i++) {     if (parents1[i] != parents2[i]) return parents1[i - 1]   } } 

Answer 2

The solutions involving manually going through the ancestor elements are far more complicated than necessary. You don't need to do the loops manually. Get all the ancestor elements of one element with parents(), reduce it to the ones that contain the second element with has(), then get the first ancestor with first().

var a = $('#a'),     b = $('#b'),     closestCommonAncestor = a.parents().has(b).first(); 

jsFiddle example