iframeの内容を呼び出して直近5件のみを表示させるjQuery

更新日：2021年9月10日

iframeを使って特定のhtmlファイルを呼び出して表示させる方法は一般的ですが、iframeで呼び出したものを抜粋して一部だけ表示させるとなると一気に難しくなります。
今回の記事はその方法のご紹介になります。

前置きとして、bknumber.htmlとindex.htmlという2つのhtmlファイルがあるとします。
bknumber.htmlには下記のソースコードが書かれており、こちらのhtmlファイルをindex.htmlにiframeで読み込ませる想定です。

	
2021年9月9日
	
最新情報その1です。


	
2021年9月8日
	
最新情報その2です。


	
2021年9月7日
	
最新情報その3です。


	
2021年9月6日
	
最新情報その4です。


	
2021年9月5日
	
最新情報その5です。


	
2021年9月4日
	
最新情報その6です。


	
2021年9月3日
	
最新情報その7です。


	
2021年9月2日
	
最新情報その8です。


	
2021年9月1日
	
最新情報その9です。


	
2021年8月30日
	
最新情報その10です。

次にindex.htmlのhtmlには下記のソースコードを書き、

index.htmlのjQueryには下記のソースコードを書きます。

$(window).load(function() {
	var iframe_contents = $("iframe").contents().find(".iframe_div table tbody tr:nth-child(-n+5)");
	$(".latest table").html(iframe_contents);
	$("iframe").hide();
});

これにて実装は完了です。
ソースコードを読むだけだと少し分かりづらいので解説すると、index.htmlのhtmlにはbknumber.htmlを読み込ます為のiframeの記述があり、latestというclassが振られたtableが入ったdivがあります。
このlatestの中にjQueryで整形したソースコードを表示させます。

次にindex.htmlのjQueryの
$("iframe").contents().find(".iframe_div table tr:nth-child(-n+5)");
ではiframeの中身を読み込み、その中のiframe_divというclassのdivの中のtableの中のtr要素を、
上から5件を取得するということが書かれています。
そしてその上から5件取得したものをclassのlatestのtableの中に書き出すということをしています。

最後に用なしになったbknumber.htmlを読み込ます為のiframeの記述をhide()で非表示にした完成という訳です。

ちなみにiframeの内容をjQueryで呼び出すだけなら以下の記述だけでOKです。
$("iframe").contents()

いかがでしょうか。
少し高度な内容になりますが、きっと何かの役に立つはずです。