1

我已经关注了HTML，

 <input type=text id='input_field_1` class='row'/>
 <input type=text id='input_field_2` class='row'/>
 <input type=text id='optional_field_3` class='row'/>

在上面，DOM如果我想选择id开始的元素，input_field_那么我可以通过$("input[id^='input_field_']")

现在更多input的元素被添加到现有的DOM结构中，那些是

 <input type=text id='input_field_min_4` class='row'/>
 <input type=text id='input_field_max_5` class='row'/>
 <input type=text id='optional_field_6` class='row'/>

如果我使用$("input[id^='input_field_']")，那么所有以 开头的元素input_field_，包括input_field_min_4并且input_field_max_5也在选择。

我不想要这个，我想排除input_field_min_4和input_field_max_5，因为如果做一些类似的事情，$("input[id^='input_field_'],input:not[id^='input_field_m']")那么结果不会达到我的预期。

4

4 回答 4

3

您拥有的选择器无效，将导致 JavaScript 错误。它缺少 . 周围的括号:not。

console.log($("input[id^='input_field_'],input:not([id^='input_field_m'])"));
                                                  ^                     ^

但是，即使添加了它们，,选择器之间的存在也会导致选择id="^input_field_" 或不选择id="^input_field_m"，这实际上匹配所有输入。

您需要将属性选择器（Combine CSS Attribute Selectors）和否定伪类:not组合在一起，因此下面将选择前两个<input>元素。

console.log($('input[id^="input_field_"]:not([id^="input_field_m"])'));

有问题的 HTML 代码也使用了一些不一致的引号。反引号可能会导致一些问题。

于 2013-03-20T09:05:51.393 回答
2

您可以使用not方法：

$("input[id^='input_field_']").not('[id*=min], [id*=max]');

http://jsfiddle.net/A5Gn8/

请注意，这些选择器效率不高。如果可能的话，您应该考虑使用不同的逻辑来选择元素。

更快的选择：

$("input").filter(function(){
   return this.id.match(/^input_field_\d/);
});

http://jsfiddle.net/Ueeht/

于 2013-03-20T08:59:11.553 回答
1

这应该可以解决问题：

$("input[id^='input_field_']").not("[id^='input_field_m']");

尽管如此，您仍然认为您最好使用其他属性（role例如，或data一个）来做出这种区分并简化您的选择器。例如，如果这些附加输入标有 , 之类的东西data-limit="min"，那么data-limit="max"您的选择器将像...

$("input[id^='input_field_']").not("[data-limit]");
于 2013-03-20T08:58:08.737 回答
1

用逗号分隔选择器会产生or条件，您需要and在这里，您必须组合条件并使用排除 id:not

现场演示

$("input[id^=input_field_]:not([id^=input_field_m])");
于 2013-03-20T08:58:40.707 回答