Question

我关注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']")这样做，那么结果就达不到我的期望。

Answer 1

您拥有的选择器无效，会导致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代码使用了一些不一致的引号。反击可能会导致一些问题。

Answer 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/

Answer 3

这应该可以解决问题：

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

但仍然认为，您最好使用其他属性（例如role或data个）来区分和简化选择器。例如，如果其他输入标记为data-limit="min"，data-limit="max"，则您的选择器将像...一样简单......

$("input[id^='input_field_']").not("[data-limit]");

Answer 4

使用逗号分隔选择器会产生or条件，您需要and，您必须合并条件并使用:not

排除ID

<强> Live Demo

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

“输入”类型的jQuery选择器，不包括某些匹配的元素

4 个答案: