複数のバージョンのjQueryを読んでしまったときの共存のさせ方

新人のMです。今週もよろしくお願いします。

今回は、複数のバージョンのjQueryを読まないといけないときの対処方法について書きたいと思います。1.7系でしか動かないコードがあるけど、1.10系も使ってみたい場合やajaxで取得したページにjQueryを再取得してしまってる場合などにお試しください(※推奨できる方法ではないので、実装を見直すべきですが)

2個目のjQueryを読む前に処理したい場合

古いjQueryを別の変数に退避させて、新しいjQueryを読む方法です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$old = jQuery;
</script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
console.log($old().jquery); // => 1.7.2
console.log($().jquery); // => 1.10.2
console.log(jQuery().jquery); // => 1.10.2
</script>

2個目のjQueryを読んだあとに処理したい場合

新しいjQueryを読んだあとに、noConflict([removeAll])で古いjQueryを復活させる方法です。removeAllのオプションにtrueを渡すと$オブジェクトだけではなく、jQueryのオブジェクトも元に戻されます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$new = jQuery.noConflict(true);
console.log($().jquery); // => 1.7.2
console.log(jQuery().jquery);
// removeAll is true => 1.7.2
// removeAll is false => 1.10.2
console.log($new().jquery); // => 1.10.2
</script>

まとめ

複数のバージョンのjQueryを読まないといけないときの対処方法について紹介しました。どうしても複数のバージョンのjQueryを共存させないといけないときなどにご活用ください。