Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?
@tomoko523

jQueryのclass前方一致で詰まった

More than 5 years have passed since last update.

おさらい

前方一致:[属性名^="値"] 属性値が指定された値で始まる要素を取得
後方一致:[属性名$="値"] 属性値が指定された値で終わる要素を取得
部分一致:[属性名*="値"] 属性値に指定された値が含まれる要素を取得
単語の完全一致:[属性名~="値"] 属性値に指定された値が1単語として含まれる要素を取得

つまった

classのように、複数値を持つ属性の前方一致がうまくいかない。

結論

前方一致させたい値は先頭に配置する。

  • classで"fuga_"の値で前方一致をさせたい。
var fugacols= $("[class^='fuga']");
// ×取得できない
<span class="hoge_A fuga_1">いち</pan>
<span class="hoge_A fuga_2"></span>
<span class="piyo_A fuga_3">さん</span>
<span class="piyo_A fuga_4">よん</span>
// → fugacols.length:0 
// 〇取得できる
<span class="fuga_1 hoge_A">いち</pan>
<span class="fuga_2 hoge_A"></span>
<span class="fuga_3 piyo_A">さん</span>
<span class="fuga_4 piyo_A ">よん</span>
// → fugacols.length:3 

気が付くまで時間がかかった…常識なのかな?

ちなみに後方一致なら逆に最後に配置すると取得できます。

  • classで"_A"の値で後方一致をさせたい。
var lastAcols= $("[class$='_A']");
// ×取得できない
<span class="hoge_A fuga_1">いち</pan>
<span class="hoge_A fuga_2"></span>
<span class="piyo_A fuga_3">さん</span>
<span class="piyo_A fuga_4">よん</span>
// → lastAcols.length:0 
// 〇取得できる
<span class="fuga_1 hoge_A">いち</pan>
<span class="fuga_2 hoge_A"></span>
<span class="fuga_3 piyo_A">さん</span>
<span class="fuga_4 piyo_A ">よん</span>
// → lastAcols.length:3 

部分一致/単語の完全一致なら、配置順序関係なく取得できました。

20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
gunosy
情報キュレーションサービス「グノシー」や「ニュースパス」の開発・運営を通じて、情報を世界の人に最適に届けていきます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
20
Help us understand the problem. What is going on with this article?