We Keep Coding

JavaScript - Different function-runtime processing the same data-structure - How is that possible?

My task is to write a test-function. So that the runtime of two different function-implementation (doing the same task) can be compared. Task is to change a dash-separated string to camel case notation. But that's secondary here.
I guess I should show the whole test-setup first:
// The array with the test-data. I have shorten it a lot.
// The original-array, used for the test, is much larger.
var test = ["Alpha-North-blue-teal-West-pink-crimson-Delta",
"crimson-Gamma-blue-Delta",
"white-cyan-South-blue-East-East-South-blue",
"teal-black-East-East",
"South-black",
"black-cyan",
"West-white-Beta-Gamma-red-North-Alpha-Beta",
"Gamma-North-West-lime-North-crimson-North",
"blue-red-orange",
"red-West-South"];
// -- Implementation 1 ----------
function dashedToCamelCase( dashed ) {
var ret;
var parts;
if (typeof dashed !== 'string' || !dashed) {
return '';
}
parts = dashed.split('-');
ret = parts[0].toLowerCase();
parts = parts.slice(1);
ret = parts.reduce(function(previous, current) {
return previous +
current.slice(0, 1).toUpperCase() +
current.slice(1).toLowerCase();
}, ret);
return ret;
}
// -- Implementation 2 ----------
function dashedToCamelCase2( dashed ) {
if( typeof dashed != "string" || dashed.length==0 )
return "";
return dashed.toLowerCase().replace(/\-([a-z]?)/g, function(match, letter) {
return letter.toUpperCase();
});
}
function getRuntime(testData, func, countRunningTests) {
var i;
var tmp = 0;
var sum = 0;
var min = 0;
var max = 0;
var ret = {};
var getRuntimeSingleTest = function() {
var start = Date.now();
testData.forEach( function( item ) {
func(item);
});
return (Date.now() - start);
}
for (i = 1; i <= countRunningTests; i++) {
tmp = getRuntimeSingleTest( testData, func );
sum += tmp;
if (min === 0 || tmp < min) {
min = tmp;
} else if (tmp > max) {
max = tmp;
}
}
ret.averageRuntime = sum / countRunningTests;
ret.minimalRuntime = min;
ret.maximalRuntime = max;
return ret;
}
function displayResults( results, funcName ) {
funcName = funcName || '';
console.log('\n%s', funcName);
for ( var i in results ) {
console.log('%s : %s ms', i, results[i]);
}
}
displayResults(getRuntime(test, dashedToCamelCase, 100), ' - Implementation using reduce() - ');
displayResults(getRuntime(test, dashedToCamelCase2, 100), ' - Implementation using replace() - ');
What I don't understand:
I let the functions process the whole string-array many times. The results for the minimum and the maximum runtime differ a lot. With a lot I mean the maximal-runtime is six or seven times higher then the minimal-runtime.
The average-runtime also differs a lot. But not multiple times.
How is that possible?
It's always the same data which are used. The results should be at least similar.
Test have been runned on a computer with Windows 7 and Internet Explorer 11.
CPU: Intel i5-3230M 2.60 GHz
RAM: 8 GB
UPDATE
Like in the accepted answer suggested I increased in count of test-runs.
What I can say now is that the more test-runs used the more stable becomes the average-runtime.
So it's likely as supposed: The variations in the minimum- and maximum-results are an result of other processes which demand CPU-time.

Run time depends on running processes on your computer. So if your antivirus starts to do some stuff, than your browser process must wait.
Better run these tests like 100000 times same function to calculate average.

optimize search for timecode value in html5 video's buffer?

Here is my function for determining if a given timecode in the buffer of an html5 video element (learned about this here).
I think there must be a faster way. Maybe a binary search over the start times?
I considered an interval tree, but the cost to maintain that data structure seems excessive given a system level data structure is provided.
isTimecodeInBuffer = function( _tc ) {
var r = $(html5VideoEl).buffered;
var i;
var iMax = r.length;
var within = false;
//todo: better seek here
for (i=0; i<iMax; ++i) {
if (_tc >= r.start(i) && _tc < r.end(i)) {
within = true;
break;
}
}
return within;
};

You can do this with a standard binary search that is slightly modified to test for matching a time range, rather than an exact match. It's not worth storing any kind of data structure, since the data will change quite frequently as additional data is buffered.
function bufferedGreater(haystack, index, value) {
return haystack.end(index) <= value;
}
function bufferedLess(haystack, index, value) {
return haystack.start(index) > value;
}
function binarySearch(haystack, needle, greaterThan, lessThan) {
var minIndex = 0,
maxIndex = haystack.length - 1,
currentIndex;
while (minIndex <= maxIndex) {
currentIndex = Math.floor((minIndex + maxIndex) / 2);
if (greaterThan(haystack, currentIndex, needle)) {
minIndex = currentIndex + 1;
} else if (lessThan(haystack, currentIndex, needle)) {
maxIndex = currentIndex - 1;
} else {
return currentIndex;
}
}
return -1;
}
var buffered = binarySearch(video.buffered, 10, bufferedGreater, bufferedLess) >= 0;
There is a working demo at http://jsbin.com/vifedogi/1/edit?html,js,console,output
Note: you'll want to access the buffered object directly on the video element, not on the jQuery object, like var r = html5VideoEl.buffered;

Fastest way to find the index of a child node in parent

I want to find the index of the child div that has the id 'whereami'.
<div id="parent">
<div></div>
<div></div>
<div id="whereami"></div>
<div></div>
</div>
Currently I am using this function to find the index of the child.
function findRow(node){
var i=1;
while(node.previousSibling){
node = node.previousSibling;
if(node.nodeType === 1){
i++;
}
}
return i; //Returns 3
}
var node = document.getElementById('whereami'); //div node to find
var index = findRow(node);
fiddle: http://jsfiddle.net/grantk/F7JpH/2/
The Problem
When there are a thousands of div nodes, the while loop has to traverse through each div to count them. Which can take a while.
Is there any faster way to tackle this?
*Note that the id will change to different divs node, so it will need to be able to re-calculate.

Out of curiosity I ran your code against both jQuery's .index() and my below code:
function findRow3(node)
{
var i = 1;
while (node = node.previousSibling) {
if (node.nodeType === 1) { ++i }
}
return i;
}
Jump to jsperf results
It turns out that jQuery is roughly 50% slower than your implementation (on Chrome/Mac) and mine arguably topped it by 1%.
Edit
Couldn't quite let this one go, so I've added two more approaches:
Using Array.indexOf
[].indexOf.call(node.parentNode.children, node);
Improvement on my earlier experimental code, as seen in HBP's answer, the DOMNodeList is treated like an array and it uses Array.indexOf() to determine the position within its .parentNode.children which are all elements. My first attempt was using .parentNode.childNodes but that gives incorrect results due to text nodes.
Using previousElementSibling
Inspired by user1689607's answer, recent browsers have another property besides .previousSibling called .previousElementSibling, which does both original statements in one. IE <= 8 doesn't have this property, but .previousSibling already acts as such, therefore a feature detection would work.
(function() {
// feature detection
// use previousElementSibling where available, IE <=8 can safely use previousSibling
var prop = document.body.previousElementSibling ? 'previousElementSibling' : 'previousSibling';
getElementIndex = function(node) {
var i = 1;
while (node = node[prop]) { ++i }
return i;
}
Conclusion
Using Array.indexOf() is not supported on IE <= 8 browsers, and the emulation is simply not fast enough; however, it does give 20% performance improvement.
Using feature detection and .previousElementSibling yields a 7x improvement (on Chrome), I have yet to test it on IE8.

By co-opting Array indexOf you could use :
var wmi = document.getElementById ('whereami');
index = [].indexOf.call (wmi.parentNode.children, wmi);
[Tested on Chrome browser only]

I added two tests to the jsPerf test. Both use previousElementSibling, but the second includes compatibility code for IE8 and lower.
Both of them perform extremely well in modern browsers (which is most browsers in use today), but will take a small hit in older browsers.
Here's the first one that doesn't include the compatibility fix. It'll work in IE9 and higher, as well as pretty much all of Firefox, Chrome and Safari.
function findRow6(node) {
var i = 1;
while (node = node.previousElementSibling)
++i;
return i;
}
Here's the version with the compatibility fix.
function findRow7(node) {
var i = 1,
prev;
while (true)
if (prev = node.previousElementSibling) {
node = prev;
++i;
} else if (node = node.previousSibling) {
if (node.nodeType === 1) {
++i;
}
} else break;
return i;
}
Because it automatically grabs element siblings, there's no test needed for nodeType, and the loop is shorter overall. This explains the large performance increase.
I also added one last version that loops the .children, and compares the node to each one.
This isn't quite as fast as the previousElementSibling versions, but is still faster than the others (at least in Firefox).
function findRow8(node) {
var children = node.parentNode.children,
i = 0,
len = children.length;
for( ; i < len && children[i] !== node; i++)
; // <-- empty statement
return i === len ? -1 : i;
}
Going back to the previousElementSibling version, here's a tweak that may bump up the performance just a bit.
function findRow9(node) {
var i = 1,
prev = node.previousElementSibling;
if (prev) {
do ++i;
while (prev = prev.previousElementSibling);
} else {
while (node = node.previousSibling) {
if (node.nodeType === 1) {
++i;
}
}
}
return i;
}
I haven't tested it in the jsPerf, but breaking it out into two different loops based on the presence of a previouselementSibling would only help I would think.
Maybe I'll add it in a bit.
I went ahead and added it to the test linked at the top of this answer. It does help a little bit, so I think it's probably worth doing.

A little improvement over Jack's solution, 3% improvement. Little weird indeed.
function findRow5(node)
{
var i = 2;
while (node = node.previousSibling)
i += node.nodeType ^ 3;
return i >> 1;
}
As there are only two possible nodeTypes in this case (and in most cases):
Node.ELEMENT_NODE == 1
Node.TEXT_NODE == 3
So xor 3 with nodeType, will give 2 and 0.
http://jsperf.com/sibling-index/4

Since you are using jQuery. index should do the trick
jQuery('#whereami').index()
but how are you going to use the index later?

Try this:
function findRow(node) {
var i = 1;
while ((node = node.previousSibling) != null) {
if (node.nodeType === 1) i++;
}
return i; //Returns 3
}

Generally speaking, a small difference in performance has a negligible effect unless the code is run in a loop. Having to run the code once instead of every time will be significantly faster.
Do something like this once:
var par = document.getElementById('parent');
var childs = par.getElementsByTagName('*');
for (var i=0, len = childs.length;i < len;i++){
childs[i].index = i;
}
Subsequently finding the index is as easy as:
document.getElementById('findme').index
It sounds like whatever you're doing could be benefited by having a cleaner relationship between the DOM and the javascript. Consider learning Backbone.js, a small javascript MVC library which makes web applications much easier to control.
edit: I've removed the jQuery I used. I do normally avoid using it, but there's quite a preference for it on SO, so I assumed it would end up being used anyway. Here you can see the obvious difference: http://jsperf.com/sibling-index/8

I hypothesise that given an element where all of its children are ordered on the document sequentially, the fastest way should be to to do a binary search, comparing the document positions of the elements. However, as introduced in the conclusion the hypothesis is rejected. The more elements you have, the greater the potential for performance. For example, if you had 256 elements, then (optimally) you would only need to check just 16 of them! For 65536, only 256! The performance grows to the power of 2! See more numbers/statistics. Visit Wikipedia
(function(constructor){
'use strict';
Object.defineProperty(constructor.prototype, 'parentIndex', {
get: function() {
var searchParent = this.parentElement;
if (!searchParent) return -1;
var searchArray = searchParent.children,
thisOffset = this.offsetTop,
stop = searchArray.length,
p = 0,
delta = 0;
while (searchArray[p] !== this) {
if (searchArray[p] > this)
stop = p + 1, p -= delta;
delta = (stop - p) >>> 1;
p += delta;
}
return p;
}
});
})(window.Element || Node);
Then, the way that you use it is by getting the 'parentIndex' property of any element. For example, check out the following demo.
(function(constructor){
'use strict';
Object.defineProperty(constructor.prototype, 'parentIndex', {
get: function() {
var searchParent = this.parentNode;
if (searchParent === null) return -1;
var childElements = searchParent.children,
lo = -1, mi, hi = childElements.length;
while (1 + lo !== hi) {
mi = (hi + lo) >> 1;
if (!(this.compareDocumentPosition(childElements[mi]) & 0x2)) {
hi = mi;
continue;
}
lo = mi;
}
return childElements[hi] === this ? hi : -1;
}
});
})(window.Element || Node);
output.textContent = document.body.parentIndex;
output2.textContent = document.documentElement.parentIndex;
Body parentIndex is <b id="output"></b><br />
documentElements parentIndex is <b id="output2"></b>
Limitations
This implementation of the solution will not work in IE8 and below.
Binary VS Linear Search On 200 thousand elements (might crash some mobile browsers, BEWARE!):
In this test, we will see how long it takes for a linear search to find the middle element VS a binary search. Why the middle element? Because it is at the average location of all the other locations, so it best represents all of the possible locations.
Binary Search
(function(constructor){
'use strict';
Object.defineProperty(constructor.prototype, 'parentIndexBinarySearch', {
get: function() {
var searchParent = this.parentNode;
if (searchParent === null) return -1;
var childElements = searchParent.children,
lo = -1, mi, hi = childElements.length;
while (1 + lo !== hi) {
mi = (hi + lo) >> 1;
if (!(this.compareDocumentPosition(childElements[mi]) & 0x2)) {
hi = mi;
continue;
}
lo = mi;
}
return childElements[hi] === this ? hi : -1;
}
});
})(window.Element || Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
var child=test.children.item(99.9e+3);
var start=performance.now(), end=Math.round(Math.random());
for (var i=200 + end; i-- !== end; )
console.assert( test.children.item(
Math.round(99.9e+3+i+Math.random())).parentIndexBinarySearch );
var end=performance.now();
setTimeout(function(){
output.textContent = 'It took the binary search ' + ((end-start)*10).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
test.remove();
test = null; // free up reference
}, 125);
}, 125);
<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>
Backwards (`lastIndexOf`) Linear Search
(function(t){"use strict";var e=Array.prototype.lastIndexOf;Object.defineProperty(t.prototype,"parentIndexLinearSearch",{get:function(){return e.call(t,this)}})})(window.Element||Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
var child=test.children.item(99e+3);
var start=performance.now(), end=Math.round(Math.random());
for (var i=2000 + end; i-- !== end; )
console.assert( test.children.item(
Math.round(99e+3+i+Math.random())).parentIndexLinearSearch );
var end=performance.now();
setTimeout(function(){
output.textContent = 'It took the backwards linear search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
test.remove();
test = null; // free up reference
}, 125);
});
<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>
Forwards (`indexOf`) Linear Search
(function(t){"use strict";var e=Array.prototype.indexOf;Object.defineProperty(t.prototype,"parentIndexLinearSearch",{get:function(){return e.call(t,this)}})})(window.Element||Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
var child=test.children.item(99e+3);
var start=performance.now(), end=Math.round(Math.random());
for (var i=2000 + end; i-- !== end; )
console.assert( test.children.item(
Math.round(99e+3+i+Math.random())).parentIndexLinearSearch );
var end=performance.now();
setTimeout(function(){
output.textContent = 'It took the forwards linear search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
test.remove();
test = null; // free up reference
}, 125);
});
<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>
PreviousElementSibling Counter Search
Counts the number of PreviousElementSiblings to get the parentIndex.
(function(constructor){
'use strict';
Object.defineProperty(constructor.prototype, 'parentIndexSiblingSearch', {
get: function() {
var i = 0, cur = this;
do {
cur = cur.previousElementSibling;
++i;
} while (cur !== null)
return i; //Returns 3
}
});
})(window.Element || Node);
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
var child=test.children.item(99.95e+3);
var start=performance.now(), end=Math.round(Math.random());
for (var i=100 + end; i-- !== end; )
console.assert( test.children.item(
Math.round(99.95e+3+i+Math.random())).parentIndexSiblingSearch );
var end=performance.now();
setTimeout(function(){
output.textContent = 'It took the PreviousElementSibling search ' + ((end-start)*20).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
test.remove();
test = null; // free up reference
}, 125);
});
<output id=output> </output><br />
<div id=test style=visibility:hidden;white-space:pre></div>
No Search
For benchmarking what the result of the test would be if the browser optimized out the searching.
test.innerHTML = '<div> </div> '.repeat(200e+3);
// give it some time to think:
requestAnimationFrame(function(){
var start=performance.now(), end=Math.round(Math.random());
for (var i=2000 + end; i-- !== end; )
console.assert( true );
var end=performance.now();
setTimeout(function(){
output.textContent = 'It took the no search ' + (end-start).toFixed(2) + 'ms to find the 999 thousandth to 101 thousandth children in an element with 200 thousand children.';
test.remove();
test = null; // free up reference
}, 125);
});
<output id=output> </output><br />
<div id=test style=visibility:hidden></div>
The Conculsion
However, after viewing the results in Chrome, the results are the opposite of what was expected. The dumber forwards linear search was a surprising 187 ms, 3850%, faster than the binary search. Evidently, Chrome somehow magically outsmarted the console.assert and optimized it away, or (more optimistically) Chrome internally uses numerical indexing system for the DOM, and this internal indexing system is exposed through the optimizations applied to Array.prototype.indexOf when used on a HTMLCollection object.

Year 2020 - A solution if you're using Tables - Clean Vanilla JS approach
Credit goes to: Alain Cruz
Source: https://stackoverflow.com/a/58845058/3626361 (leave him an Up vote if it helped you)
Question: How to return the row and column index of a table cell by clicking?
const cells = document.querySelectorAll('td');
cells.forEach(cell => {
cell.addEventListener('click', () =>
console.log("Row index: " + cell.closest('tr').rowIndex + " | Column index: " + cell.cellIndex));
});
<table>
<tr>
<td>0:0</td>
<td>0:1</td>
<td>0:2</td>
<td>0:3</td>
</tr>
<tr>
<td>1:0</td>
<td>1:1</td>
<td>1:2</td>
<td>1:3</td>
</tr>
<tr>
<td>2:0</td>
<td>2:1</td>
<td>2:2</td>
<td>2:3</td>
</tr>
</table>
Cheers! Stefano

What is the fastest way to check whether a specific UserID exists in the array using Jquery or Javascript

I have an array of objects gAllMedicalFilesClaimantsArray with 2 properties (UserID & UserInfo)
For example:
gAllMedicalFilesClaimantsArray[0].UserID = "111";
gAllMedicalFilesClaimantsArray[0].UserInfo = "AAA-111";
gAllMedicalFilesClaimantsArray[1].UserID = "222";
gAllMedicalFilesClaimantsArray[1].UserInfo = "BDD-478333";
What is the fastest way to check whether a specific UserID exists in the array using Jquery or Javascript because gAllMedicalFilesClaimantsArray has got 8000 records?
Thanks

var match = '222';
var matches = $.grep(myArray, function(el, index) {
return (el.UserID === match);
});

You can fasten the search process by using Binary Search algorithm if the array is sorted (e.g with respect to UserId).
function binarySearch(array, userid) {
var low = 0, high = array.length - 1,
i, comparison;
while (low <= high) {
i = parseInt((low + high) / 2, 10);
if (array[i].UserId < userid) { low = i + 1; continue; };
if (array[i].UserId > userid) { high = i - 1; continue; };
return array[i];
}
return null;
};
You can find the user of which ID is 12 by using the function:
var result = binarySearch(gAllMedicalFilesClaimantsArray, 12);

Something like this, I believe:
function exists(uid) {
var k = gAllMedicalFilesClaimantsArray.length;
uid = uid.toString(); // ensure the arg is a str (this can be omitted)
while (k--) {
if (gAllMedicalFilesClaimantsArray[k].UserID === uid) {
return true;
}
}
return false;
}
Is the array sorted by the UserID? If so, it can be improved either further by using a binary search; that would change this from O(n) to O(log n). Your example suggests it is. I found a good implementation of a binary search in JavaScript on the web, here. Here is the code if the site ever dies:
function binarySearch(items, value){
var startIndex = 0,
stopIndex = items.length - 1,
middle = Math.floor((stopIndex + startIndex)/2);
while(items[middle] != value && startIndex < stopIndex){
//adjust search area
if (value < items[middle]){
stopIndex = middle - 1;
} else if (value > items[middle]){
startIndex = middle + 1;
}
//recalculate middle
middle = Math.floor((stopIndex + startIndex)/2);
}
//make sure it's the right value
return (items[middle] != value) ? -1 : middle;
}

ExistsInArray(value, array){
for(var item in array){
if(item.UserId == value){
return true;
}
}
return false;
}

You can either prototype Array object, like this:
Array.prototype.exists = function(value, prop){
var i = null;
for (i in this)
if (this[i][prop] && this[i][prop] == value)
return true;
return false;
}
gAllMedicalFilesClaimantsArray.exists('222', 'UserID');

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

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.

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]
}
}

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

Here's another pure method that uses element.compareDocumentPosition() and element.contains(), the former being a standards method and the latter being a method supported by most major browsers excluding Firefox:
Comparing two nodes
function getCommonAncestor(node1, node2) {
var method = "contains" in node1 ? "contains" : "compareDocumentPosition",
test = method === "contains" ? 1 : 0x10;
while (node1 = node1.parentNode) {
if ((node1[method](node2) & test) === test)
return node1;
}
return null;
}
Working demo: http://jsfiddle.net/3FaRr/ (using lonesomeday's test case)
This should be, more or less, as efficient as possible since it is pure DOM and has only one loop.
Comparing two or more nodes
Taking another look at the question, I noticed the "or more" part of the "two or more" requirement had gone ignored by the answers. So I decided to tweak mine slightly to allow any number of nodes to be specified:
function getCommonAncestor(node1 /*, node2, node3, ... nodeN */) {
if (arguments.length < 2)
throw new Error("getCommonAncestor: not enough parameters");
var i,
method = "contains" in node1 ? "contains" : "compareDocumentPosition",
test = method === "contains" ? 1 : 0x0010,
nodes = [].slice.call(arguments, 1);
rocking:
while (node1 = node1.parentNode) {
i = nodes.length;
while (i--) {
if ((node1[method](nodes[i]) & test) !== test)
continue rocking;
}
return node1;
}
return null;
}
Working demo: http://jsfiddle.net/AndyE/3FaRr/1

The commonAncestorContainer property of the he Range API mentioned above, alongside its selectNode, makes this a no-brainer.
Run ("display") this code in Firefox's Scratchpad or a similar editor:
var range = document.createRange();
var nodes = [document.head, document.body]; // or any other set of nodes
nodes.forEach(range.selectNode, range);
range.commonAncestorContainer;
Note that both APIs are not supported by IE 8 or below.

Try this:
function get_common_ancestor(a, b)
{
$parentsa = $(a).parents();
$parentsb = $(b).parents();
var found = null;
$parentsa.each(function() {
var thisa = this;
$parentsb.each(function() {
if (thisa == this)
{
found = this;
return false;
}
});
if (found) return false;
});
return found;
}
Use it like this:
var el = get_common_ancestor("#id_of_one_element", "#id_of_another_element");
That's just rattled out pretty quickly, but it should work. Should be easy to amend if you want something slightly different (e.g. jQuery object returned instead of DOM element, DOM elements as arguments rather than IDs, etc.)

You should be able to use the jQuery .parents() function and then walk through the results looking for the first match. (Or I guess you could start from the end and go backwards until you see the first difference; that's probably better.)

You can also use a DOM Range (when supported by the browser, of course). If you create a Range with the startContainer set to the earlier node in the document and the endContainer set to the later node in the document, then the commonAncestorContainer attribute of such a Range is the deepest common ancestor node.
Here is some code implementing this idea:
function getCommonAncestor(node1, node2) {
var dp = node1.compareDocumentPosition(node2);
// If the bitmask includes the DOCUMENT_POSITION_DISCONNECTED bit, 0x1, or the
// DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC bit, 0x20, then the order is implementation
// specific.
if (dp & (0x1 | 0x20)) {
if (node1 === node2) return node1;
var node1AndAncestors = [node1];
while ((node1 = node1.parentNode) != null) {
node1AndAncestors.push(node1);
}
var node2AndAncestors = [node2];
while ((node2 = node2.parentNode) != null) {
node2AndAncestors.push(node2);
}
var len1 = node1AndAncestors.length;
var len2 = node2AndAncestors.length;
// If the last element of the two arrays is not the same, then `node1' and `node2' do
// not share a common ancestor.
if (node1AndAncestors[len1 - 1] !== node2AndAncestors[len2 - 1]) {
return null;
}
var i = 1;
for (;;) {
if (node1AndAncestors[len1 - 1 - i] !== node2AndAncestors[len2 - 1 - i]) {
// assert node1AndAncestors[len1 - 1 - i - 1] === node2AndAncestors[len2 - 1 - i - 1];
return node1AndAncestors[len1 - 1 - i - 1];
}
++i;
}
// assert false;
throw "Shouldn't reach here!";
}
// "If the two nodes being compared are the same node, then no flags are set on the return."
// http://www.w3.org/TR/DOM-Level-3-Core/core.html#DocumentPosition
if (dp == 0) {
// assert node1 === node2;
return node1;
} else if (dp & 0x8) {
// assert node2.contains(node1);
return node2;
} else if (dp & 0x10) {
// assert node1.contains(node2);
return node1;
}
// In this case, `node2' precedes `node1'. Swap `node1' and `node2' so that `node1' precedes
// `node2'.
if (dp & 0x2) {
var tmp = node1;
node1 = node2;
node2 = tmp;
} else {
// assert dp & 0x4;
}
var range = node1.ownerDocument.createRange();
range.setStart(node1, 0);
range.setEnd(node2, 0);
return range.commonAncestorContainer;
}

This doesn't require much code anymore to solve:
steps:
grab parent of node_a
if parent of node_a contains node_b return parent (in our code, the parent is referenced as node_a)
if parent does not contain node_b we need to keep going up the chain
end return null
code:
function getLowestCommonParent(node_a, node_b) {
while (node_a = node_a.parentElement) {
if (node_a.contains(node_b)) {
return node_a;
}
}
return null;
}

based on the answers from Andy E and AntonB
handle edge-cases: node1 == node2 and node1.contains(node2)
function getCommonParentNode(node1, node2) {
if (node1 == node2) return node1;
var parent = node1;
do if (parent.contains(node2)) return parent
while (parent = parent.parentNode);
return null;
}

This is a generalized take on lonesomeday's answer. Instead of only two elements it will take a full JQuery object.
function CommonAncestor(jq) {
var prnt = $(jq[0]);
jq.each(function () {
prnt = prnt.parents().add(prnt).has(this).last();
});
return prnt;
}

Somewhat late to the party, but here's an elegant jQuery solution (since the question is tagged jQuery) -
/**
* Get all parents of an element including itself
* #returns {jQuerySelector}
*/
$.fn.family = function() {
var i, el, nodes = $();
for (i = 0; i < this.length; i++) {
for (el = this[i]; el !== document; el = el.parentNode) {
nodes.push(el);
}
}
return nodes;
};
/**
* Find the common ancestors in or against a selector
* #param selector {?(String|jQuerySelector|Element)}
* #returns {jQuerySelector}
*/
$.fn.common = function(selector) {
if (selector && this.is(selector)) {
return this;
}
var i,
$parents = (selector ? this : this.eq(0)).family(),
$targets = selector ? $(selector) : this.slice(1);
for (i = 0; i < $targets.length; i++) {
$parents = $parents.has($targets.eq(i).family());
}
return $parents;
};
/**
* Find the first common ancestor in or against a selector
* #param selector {?(String|jQuerySelector|Element)}
* #returns {jQuerySelector}
*/
$.fn.commonFirst = function(selector) {
return this.common(selector).first();
};

Somewhat late to the party, here's a JavaScript ES6 version that uses Array.prototype.reduce() and Node.contains(), and can take any number of elements as parameters:
function closestCommonAncestor(...elements) {
const reducer = (prev, current) => current.parentElement.contains(prev) ? current.parentElement : prev;
return elements.reduce(reducer, elements[0]);
}
const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');
const commonAncestor = closestCommonAncestor(element1, element2);

Here is a dirtier way of doing this. It's easier to understand but requires dom modification:
function commonAncestor(node1,node2){
var tmp1 = node1,tmp2 = node2;
// find node1's first parent whose nodeType == 1
while(tmp1.nodeType != 1){
tmp1 = tmp1.parentNode;
}
// insert an invisible span contains a strange character that no one
// would use
// if you need to use this function many times,create the span outside
// so you can use it without creating every time
var span = document.createElement('span')
, strange_char = '\uee99';
span.style.display='none';
span.innerHTML = strange_char;
tmp1.appendChild(span);
// find node2's first parent which contains that odd character, that
// would be the node we are looking for
while(tmp2.innerHTML.indexOf(strange_char) == -1){
tmp2 = tmp2.parentNode;
}
// remove that dirty span
tmp1.removeChild(span);
return tmp2;
}

PureJS
function getFirstCommonAncestor(nodeA, nodeB) {
const parentsOfA = this.getParents(nodeA);
const parentsOfB = this.getParents(nodeB);
return parentsOfA.find((item) => parentsOfB.indexOf(item) !== -1);
}
function getParents(node) {
const result = [];
while (node = node.parentElement) {
result.push(node);
}
return result;
}

did not liked any of the answers above(want pure javascript and one function).
that worked perfectly for me,efficient and also easier to understand:
const findCommonAncestor = (elem, elem2) => {
let parent1 = elem.parentElement,parent2 = elem2.parentElement;
let childrensOfParent1 = [],childrensOfParent2 = [];
while (parent1 !== null && parent2 !== null) {
if (parent1 !== !null) {
childrensOfParent2.push(parent2);
if (childrensOfParent2.includes(parent1)) return parent1;
}
if (parent2 !== !null) {
childrensOfParent1.push(parent1);
if (childrensOfParent1.includes(parent2)) return parent2;
}
parent1 = parent1.parentElement;
parent2 = parent1.parentElement;
}
return null;
};

Here is a better and shorter way of finding the common ancestor of two or more elements:
// find the common ancestor of two nodes
const findFirstCommonAncestor = (nodeA, nodeB) => {
if (nodeA.contains(nodeB)) return nodeA;
if (nodeB.contains(nodeA)) return nodeB;
const range = new Range();
range.setStartBefore(nodeA);
range.setEndAfter(nodeB);
if (range.collapsed) {
range.setStartBefore(nodeB);
range.setEndAfter(nodeA);
}
return range.commonAncestorContainer;
};
// find the common ancestor of multiple nodes
const firstFirstCommonAncestorMultiple = (nodes) =>
nodes.reduce((acc, node) => (acc === node ? acc : findFirstCommonAncestor(acc, node)), nodes[0]);