8
<div id="foo">...<div>
<div id="foo-bar">...<div>
<div id="foo-1">...<div>
<div id="foo-2">...<div>

上記のようなHTMLに対して、id属性がfoo-{数値}な要素のみにマッチするセレクタはあるでしょうか?

今のところは[id^=foo]で取得した全要素に対して追加でフィルタをかけて動かしていますが、できればCSSセレクタのみで完結させたいです。

$("[id^=foo]").each(function() {
    if (!this.id.match(/^foo-\d+/)) return;
    ...
});

2 件の回答 2

10

ありません。

http://www.w3.org/TR/css3-selectors/#attribute-selectors には attr^=val などの val の部分には identifier もしくは string しか指定できない=それらを指定しなればならない(must be)とあります。

Attribute values must be CSS identifiers or strings.

そして identifier および string そのどちらにもワイルドカードや正規表現を用いた記法は定義されていません。そのため純粋なCSSセレクタだけでは、そのようなマッチは実現できません。

ただし、jQueryはSizzleにより実装されたCSSセレクタを使っているでしょうから、拡張APIを用いて、そのようなセレクタを独自に定義することはできるでしょう。


追記: 気になってしまったので jQuery の custom selector を試してみました。 結果、以下の様なコードを追加することで jQuery の selector を自分で定義し、拡張できました。

jQuery.extend(jQuery.expr[":"], {
    "id-foo-num": function (el) {
        return el.id.match(/^foo-\d+/);
    }
});

利用する時は jQuery(":id-foo-num") のように pseudo selector を使います。

var output = jQuery('#output');

jQuery.extend(jQuery.expr[":"], {
  "id-foo-num": function(el) {
    return el.id.match(/^foo-\d+/);
  }
});

jQuery(":id-foo-num").each(function() {
  output.append(jQuery("<span>" + this.id + ":" + this.innerText + "</span><br />"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div id="foo">NG</div>
  <div id="foo-bar">NG</div>
  <div id="foo-1">OK</div>
  <div id="foo-23">OK</div>
  <div id="foo-999">OK</div>
</div>
<hr />
<div id="output">
</div>

1

与えられた条件は「idがfoo-(0〜9)で始まるdiv」なので、
cssだけで条件をクリアするなら、以下のselectorで可能です。
10個くらいなら条件を列挙してもいいかと思います。

div[id^="foo-0"],
div[id^="foo-1"],
div[id^="foo-2"],
div[id^="foo-3"],
div[id^="foo-4"],
div[id^="foo-5"],
div[id^="foo-6"],
div[id^="foo-7"],
div[id^="foo-8"],
div[id^="foo-9"] {
  color: red;
}
<div id="foo">#foo</div>
<div id="foo-bar">#foo-bar</div>
<div id="foo-1">#foo-1</div>
<div id="foo-2">#foo-2</div>
<div id="foo-254">#foo-254</div>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。