jQueryで複数要素の"共通する親要素"を取得する小物

セレクタで指定した要素を全て含む共通の親要素を取得したかったので作ってみた。

こちらが関数

var getSameParent = function (selector) {
	var base, temp, parent, els = $(selector);

	if (!els.length) {
		return;
	} else if(1 === els.length) {
		return els.first().parent();
	}

	els.each(function(i) {
		var e = $(this);
		if (0 === i) {
			base = e;
			parent = e.parent().get(0);
		} else {
			temp = e.parents().has(els.eq(i - 1)).first().get(0);
			if (parent !== temp) {
				parent = e.parents().has(base).first().get(0);
			}
		}
	});

	return $(parent);
};

例えば以下のようなヤラシイHTMLがあったとして、<div id="parent"> を取得したい。
というかそこにバリデーションエラーとかを append() したい場合などに。

サンプルHTML

<div id="parent">

	<label><input type="checkbox" name="checkItem[]" value="1">項目1</label>

	<div>
		<label><input type="checkbox" name="checkItem[]" value="2">項目2</label>
	</div>

	<div>
		<div>
			<label><input type="checkbox" name="checkItem[]" value="3">項目3</label>
		</div>
	</div>
</div>

<script>
// 以下で <div id="parent"> が取得できる
var parent = getSameParent('input[name^="checkItem"]');
</script>

少し動作が重そう・・・？

ちなみにjQueryプラグイン化するとこんな感じ。

jQueryプラグイン版

(function ($) {
	'use strict';
	if (!$) return;

	$.fn.sameParent = function() {
		var base, temp, parent, els = this;

		if (!els.length) {
			return;
		} else if(1 === els.length) {
			return els.first().parent();
		}

		els.each(function(i) {
			var e = $(this);
			if (0 === i) {
				base = e;
				parent = e.parent().get(0);
			} else {
				temp = e.parents().has(els.eq(i - 1)).first().get(0);
				if (parent !== temp) {
					parent = e.parents().has(base).first().get(0);
				}
			}
		});

		return $(parent);
	};
})(window.jQuery);

/* 使い方はこう
var parent = $('input[name^="checkItem"]').sameParent();
*/