想要：中间有可变部分的 jQuery 选择器

Question

考虑以下 HTML：

<div id="Kees_1_test">test 1</div>
<div id="Kees_12_test">test 2</div>
<div id="Kees_335_test">test 3</div>

我想要一个选择器来选择看起来像 $('div[id=Kees_{any number}_test]') 的 div。我怎样才能实现这个目标？

^{注意：ID 由 Asp.Net 生成。}

Answer 1

试试这个：

$('div[id^=Kees_][id$=_test]')

该选择器选择 id 以 Kees_ 开头并以 _test 结尾的所有元素。

正如 lonesomeday 建议的那样，您可以使用 .filter() 来确保中间部分仅包含数字。您可以将 .filter() 与上面的示例结合起来：

$('div[id^=Kees_][id$=_test]').filter(function() {
    return /^Kees_\d+_test$/.test(this.id);
});

这应该是最好的了。请注意，我将 ^$ 添加到正则表达式中，这将在 id 上返回 false，例如 Kees_123_test_foo，但 Kees_123_test 通过。

Answer 2

最好的解决方案是为所有 div 提供一个类并使用类选择器：

<div id="Kees_1_test" class="Kees_test">test 1</div>
<div id="Kees_12_test" class="Kees_test">test 2</div>
<div id="Kees_335_test" class="Kees_test">test 3</div>

选择器：

$('div.Kees_test');

如果不可能，最清晰的方法是使用 filter：

$('div[id^="Kees_"]').filter(function() {
    return /Kees_\d+_test/.test(this.id);
});

\d+ 表示“选择一个或多个数字”。