【続】WP4.5でjQueryがエラー: Syntax error, unrecognized expression

どの書き方がNGで、どの書き方がOKなんだろう?

WordPressロゴWordPress 4.5にて、jQuery Migrateのバージョンの上がり、セレクタの記述でエラーがでてjQueryが動作しなくなる現象ですが、さらに調査してみました。

前回の記事もご覧ください

ソースを見直しして、修正対応中に気づいたのですが、どうも必ずしもattributeの値を引用符で囲まなくてもOKのパターンもあるようです。下記は、WP4.5で使用のjQueryでSyntaxエラーになるかどうかの結果です(動作するかは確認していません)。

No. 結果 セレクターの記述
1 NG $(‘a[href^=#]’)
2 NG $(‘a[href^=#a]’)
3 NG $(‘a[href^=.]’)
4 NG $(‘a[href^=*]’)
5 NG $(‘a[href^=+]’)
6 OK $(‘a[href^=a]’)
7 OK $(‘a[href^=abc]’)
8 OK $(‘a[href^=_]’)
9 OK $(‘a[href^=0]’)
10 OK $(‘a[href^=”#”]’)
11 NG $(‘a[@href^=”#”]’)

NGの場合、下記のエラーがコンソールに表示される

Syntax error, unrecognized expression

※jQuery Migrate 1.4.0よりコンソールに「JQMIGRATE: Migrate is installed, version 1.4.0」というメッセージも表示されます。

最後のNo11のパターン[@attr]は「jQuery 1.2」以前の形式で、「jQuery 1.3」からはオミットされているようです。

ということで、すべてのセレクタの記述を修正する必要はなさそうですが、jQueryのDocumentを見ると下記のように書いてありました。

Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

  • double quotes inside single quotes: $(‘a[rel=”nofollow self”]’)
  • single quotes inside double quotes: $(“a[rel=’nofollow self’]”)
  • escaped single quotes inside single quotes: $(‘a[rel=\’nofollow self\’]’)
  • escaped double quotes inside double quotes: $(“a[rel=\”nofollow self\”]”)

Category: Attribute より

これを見る限り、そのセレクターの書き方がSyntaxエラーにならず、うまく動作していたとしても、どこかのバージョンで今回のようにSyntaxエラーもしくは動作しなくなる可能性がありそうです。ここは、おとなしくattributeの値を引用符で囲んどいたほうが良さげです。