jQueryを旧バージョンから3.5系にすると崩れる可能性

jQueryの最新バージョンであるjQuery3.5系により脆弱性が修正されセキュリティアップデートされています。

ところがこのアップデートにより旧バージョンから jQuery3.5系に変更することによって表示の崩れを起こす可能性があります。

バージョンアップによってjQuery.htmlPrefilterメソッドを呼び出し正規表現を使用してXHTMLのようなタグをHTMLで機能するバージョンに置き換えているようです。

そこで3.4と3.5の2つの違いをみていきましょう。

jQuery3.4と3.5の違い

まずhtmlを用意します。

<div class="box"></div>

jQuery('.box').append('<ul/><li/>');

上記はboxクラスのdivのなかにulとliタグを生成する記述になります。

これを3.4と3.5のバージョンで試すと下記のような結果になります。

<div class="box">
<ul></ul>
<li></li>
</div>

<div class="box">
<ul>
<li></li>
</ul>
</div>

上記の2つを見ると同じjQueryの書き方をしていても結果が異なります。

3.5系ではulの中にliが生成されていますが3.4ではulタグとliタグはそれぞれ別に生成されています。

jQueryのバージョンを変えるだけだとhtmlの崩れを起こす可能性があるのでjQueryの書き方によっては書き換える必要があります。