jquery.matchHeight.jsで非表示の要素は除外されない

jquery.matchHeight.jsで高さを揃えた要素に絞り込みの処理を追加したところ、高さ揃えがうまくいかなくなったので対応方法をメモしておきます。

サンプルコード

HTML

.type-itemをクリックしたときに、data-typeが一致する.list-itemだけを表示するようにします。

<div class="type">
	<div class="type-item" data-type="a">タイプA</div>
	<div class="type-item" data-type="b">タイプB</div>
</div>

<div class="list">
	<div class="list-item" data-type="a">
		<div class="list-item_image">
			<img src="http://placehold.it/220x180">
		</div>
		<p class="list-item_text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
	</div>
	<div class="list-item" data-type="b">
		<div class="list-item_image">
			<img src="http://placehold.it/220x180">
		</div>
		<p class="list-item_text">テキストテキストテキストテキストテキストテキスト</p>
	</div>
	～略～
	<div class="list-item" data-type="b">
		<div class="list-item_image">
			<img src="http://placehold.it/220x180">
		</div>
		<p class="list-item_text">テキストテキスト</p>
	</div>
</div>

CSS

.type {
	padding: 20px 0;
	text-align: center;
}
.type-item {
	display:inline-block;
	margin: 0 10px;
	cursor: pointer;
}
.list {
	width: 960px;
	margin: 0 auto;
}
.list-item {
	float: left;
	width: 220px;
	margin: 0 8px 20px;
	border: #666666 2px solid;
}
[data-type = 'a'] {
	color: #E74C3C;
}
[data-type = 'b'] {
	color: #3498DB;
}

JavaScript

$(function() {
	var listitem = '.list-item'; // 高さ揃えする要素
	$(listitem).matchHeight(); // 高さ揃えの実行

	$('.type-item').click(function() { // 要素の絞り込み
		$(listitem).show(); // 一旦全表示
		var datatype = $(this).attr('data-type'); // 絞り込む内容を取得
		for (var i = 0; i < $(listitem).length; i++) {
			if($(listitem).eq(i).attr('data-type') != datatype) { // 絞り込む内容と一致しない場合
				$(listitem).eq(i).hide(); // 要素を非表示にする
			}
		}
		$.fn.matchHeight._apply(listitem); // 高さ揃えの更新
	});
});

display: none;にした要素は高さ揃えの要素から勝手に除外されると思っていたのですが、高さ揃えに含まれているようでした。
絞り込み時に高さ揃えがうまくいかないデモページ
　

サンプルコード2

公式サイトのFeaturesの項目でdisplay: none;やvisibility: hidden;の要素もサポートしているとありました。

supports hidden or none-visible elements (e.g. those inside tab controls)
引用 – GitHub – liabru/jquery-match-height: a responsive equal heights plugin for jQuery

高さ揃えの対象にする要素を、.list-itemのうち表示されている要素のみにして対応しました。

JavaScript

$(function() {
	var listitem = '.list-item'; // 高さ揃えする要素
	$(listitem + ':visible').matchHeight(); // 高さ揃えの実行

	$('.type-item').click(function() { // 要素の絞り込み
		$(listitem).show(); // 一旦全表示
		var datatype = $(this).attr('data-type'); // 絞り込む内容を取得
		for (var i = 0; i < $(listitem).length; i++) {
			if($(listitem).eq(i).attr('data-type') != datatype) { // 絞り込む内容と一致しない場合
				$(listitem).eq(i).hide(); // 要素を非表示にする
			}
		}
		$.fn.matchHeight._apply(listitem + ':visible'); // 高さ揃えの更新
	});
});

絞り込み後の高さ揃え対応のデモページ