他のページのclassの値を呼び出して使うjQuery

更新日：2021年5月30日

他のページにあるclassやidの値を呼び出して、このページで書き出したいってことありませんか？
jQueryでclassの値を取得する方法は以下のように書きますが、
$(".hoge").html();
これはこの記述が書かれたページに.hogeというクラスの要素がないことには値が取得出来ません。
他のページに.hogeがある場合は通常取得することが出来ないのですが、
今回の記事は他のページにある.hogeの値を取得する方法のご紹介です！

前置きは簡潔にして早速実装方法のご紹介です。
jQueryで下記のように記述します。

$(function() {
	$.ajax({
		url: 'index.html',
		dataType: 'html',
		success: function(data) {
		$('.read').html(data);
		$('.read').hide();
		},
		error: function(data) {
			alert('error');
		}
	});
});

$(window).on('load', function() {
	var hoge = $('.hoge').html();
	$(".write").html(hoge);
});

例えばjQueryのこの記述を書くファイルがaaa.htmlだとします。
aaa.htmlに、同階層のindex.htmlの中のhogeというclass名の値を呼び出して書き出したいという想定の記述になります。
ポイントとして同階層の他のファイルだということです。

aaa.html内には、.readと.writeというの2つのdivを用意しておきます。
.writeにindex.html内の.hogeの値が書き出されます。

ソースの解説としてはajaxを使ってindex.htmlの内容を.readに呼び出します。
全て呼び出して表示してしまうと邪魔になるので、hide()で非表示にして、
.writeに.hogeの値を書き出すというものです。

index.htmlの内容は非表示にしてはいるものの、ソースとしては呼び出しているので、他のページのclassにも関わらず使えるということですね！

これにて完成です！
是非使ってみて下さいな！