セレクタの桁数まで指定した条件一致を行いたい（jquery）

Question

例として、

<li class="aabb123">aa</li> <li class="ddbb125">bb</li> <li class="cabb323">cc</li> があったとします（いずれもclassは7桁固定）。

上記3つもオブジェクトの内、「ワイルドカードを含む変数[ab**2]（7桁固定）」と合致するclassを求める場合はどのようにやればよいでしょうか。
今回の場合は

<li class="aabb123">aa</li> <li class="cabb323">cc</li> が該当になります。 前方一致、後方一致、部分一致はできると思うのですが、例のように左から2桁目がa、3桁目がb、6桁目が2のように 桁数まで指定した比較は難しいのでしょうか。

Answer 1

質問のタグに jQuery があるし、質問のタイトルにも

セレクタの桁数まで指定した条件一致を行いたい（jquery）

ってあるから jQuery使っていいんであれば

$('li').filter(
  (_, e) => e.className.match(/\b\wab\w{2}2\w\b/)
);

とかで。

ちなみに、/\b\wab\w{2}2\w\b/ は、liが検索対象の7桁固定のCSSクラス以外のクラスを持っていてもOK

たとえば、HTMLが

<li class="_x aabb123 _y1">aa</li>
<li class="ddbb125 _x">bb</li>
<li class="_x cabb323">cc</li>

だったりしても、aabb123 を持つli と、 cabb323 を持つ li の2つを取れる。
???? 動作確認用CodePen

Comments

[nyankou]

ご回答ありがとうございます。
アロー関数を使用したことがなかったため調べてみたのですが、内容を理解できていない部分がある状況です。
(_, e) => e.className.match(/\b\wab\w{2}2\w\b/)
の部分の eはイベントのことでe.classNameで使用されていると思われるのですが、_はどこかで使用されているのでしょうか。よろしければ_の意味合いも教えていただけると幸いです。

[退会済みユーザー]

コメントありがとうございます。

> (_, e) => e.className.match(/\b\wab\w{2}2\w\b/)
> の部分の eはイベントのこと

ではないです。jQuery の .filter() の説明：

https://api.jquery.com/filter/

の中で、filter の引数に 関数を渡す場合の説明に

.filter( function )
Type: Function( Integer index, Element element ) => Boolean
A function used as a test for each element in the set. this is the current DOM element.

とあり、ここにあるとおりfilter に渡す関数の引数の意味は以下
第1引数： index
第2引数： element
です。

回答に書いたコードの
> (_, e) => ・・・
の e は、この element の頭文字を意図しています。

次に、回答に書いたコードでは第一引数を _ にしていますが

> _はどこかで使用されているのでしょうか。

とおしゃるとおり、使わない変数です。このような場合の慣例として、使わない変数を _ だったり、_　を頭につけた、たとえば _index だったりにします。

参考までに以下はstackoverflowの回答ですが、

https://stackoverflow.com/a/32198002

同じく jQuery の $.each を使ったときに、上記と同様に index を使わないときに、_ にしておくというという趣旨を説明するものです。

[nyankou]

ご丁寧に解説していただきありがとうございます。
興味がありましたので早速使ってみようと思い、簡単にSTATUSというクラスを複数作り、testボタンを押下すると背景色を黄色くするコードを書いたのですが、うまく動作しません。

$("#test").on("click", function() {
$('.STATUS').filter(
(_, e) = > e.className.match(^.*STATUS.*)
).css('background-color', 'yellow');
});
根本的になにか文法が間違っておりますでしょうか。
度々の質問で大変申し訳ありません。

[退会済みユーザー]

なるほどですね。うまく動作しないんですね。

> 根本的になにか文法が間違っておりますでしょうか。

とのことですが、お手数なのですが、
その
> 簡単にSTATUSというクラスを複数作り、

との、HTMLのほうも挙げていただけますでしょうか。

[nyankou]

お返事ありがとうございます。
以下のtableを作成しました。
　　　　<input type = "button" name="test" value="テスト" id = "test" />
<table>
<tr class = "STATUS"><th>a</th></tr>
<tr class = "STATUS"><td>b</td></tr>
<tr class = "STATUS"><td>c</td></tr>
<tr class = "STATUS"><td>d</td></tr>
<tr class = "STATUS"><td>e</td></tr>
</table>

[nyankou]

$("#test").on("click", function() {
$('.STATUS').css('background-color', 'yellow');
});
は動作し対象classの背景が黄色くなるのですが、
$("#test").on("click", function() {
$('.STATUS').filter(
(_, e) = > e.className.match( ^ . * STATUS. * )
).css('background-color', 'yellow');
});
だと動作しない状況です。

[退会済みユーザー]

HTMLのご提示ありがとうございます。

拝読したところ、以下の行

> (_, e) = > e.className.match( ^ . * STATUS. * )

の、match メソッドの引数として与えている

^ . * STATUS. *

が正しくないです。match メソッドの引数には、

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match#%E6%A7%8B%E6%96%87

で説明されているとおり、正規表現オブジェクトを与える必要がありますが、
正規表現オブジェクトをどのようにして作るかというと、以下

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions#creating_a_regular_expression

で説明されているように、

/ab+c/

だったり

new RegExp('ab+c')

と書くことによって作成されます。

また、正規表現自体は、JavaScript に固有のものではありませんので、JavaScriptによるプログラミングとは別のものとして習得する学習アイテムです。
「正規表現 入門」でググれば、様々な記事が該当しますので、いくつか目を通してみて、分かりやすそうなものを読んでみるとよいかと思います。

[nyankou]

返信が遅くなり申し訳ありませんでした。
ご丁寧な解説、ありがとうございました。
ご指摘の通り正規表現の記載が誤っていたようです。
修正したところ、期待する動作になりました。
重ね重ね、御礼申し上げます。

[nyankou]

質問を閉じた後に申し訳ありません。
今回class名での比較だったためe.className.matchを使用できたのですが、カスタムデータ属性でも
className.matchのような正規表現での比較をすることのできる関数はあるものでしょうか。

[退会済みユーザー]

カスタムデータ属性でも同じことができますよ。以下の２つのやり方があります。

(1) jQuery の data メソッドを使う
　???? https://codepen.io/kilesa/pen/GRvWdZE?editors=1011

または、

(2) DOM API のdatasetプロパティを使う
　???? https://codepen.io/kilesa/pen/GRvWdjv?editors=1011

[nyankou]

早々にご回答いただきありがとうございました。
これでやりたいことができそうです。
大変ありがとうございました。

Answer 2

CSSセレクタだけでは不可能です。
JavaScriptコードで正規表現など使って絞るしかないでしょう。

jQueryのセレクタはCSSセレクタの拡張ですが、やはり不可能です。

コードの雰囲気:

let list = [...document.querySelectorAll('li')].filter(
    li => [...li.classList].some(cl => cl.match(ここに正規表現)));

Comments

[nyankou]

ご回答ありがとうございます。
また、サンプルの提示についてもありがとうございました。
やはりセレクタだけでは不可能なのですね。
javascriptではやってみたのですが、jquery等使用してもう少し効率的なやり方は無いものかと思い
投稿させていただきました。
言葉足らずで申し訳ありませんでした。
参考にさせていただきます。