CSS选择器允许一件事而不允许另一件事

CSS selector to allow one thing but not another?

本文关键字：一件 不允许 选择器 许一件 CSS      更新时间：2023-09-26

简而言之，我试图根据id获取项目的子集合。我试图获取1-1, 1-1-0, 1-1-1，但没有获取1-19, 1-19-0, 1-19-1。有什么办法做到这一点吗？

$(function(){
    
  // grabs all items but only want 1-1 items.
  $('[data-parent-id^=1-1]').prop('checked',true);  
  
  // does not grab the first item 1-1.
  $('[data-parent-id^=1-2-]').prop('checked',true);    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div>
<input type="checkbox" data-parent-id="1-1">
<input type="checkbox" data-parent-id="1-1-0">
<input type="checkbox" data-parent-id="1-1-1">    
<input type="checkbox" data-parent-id="1-19">
<input type="checkbox" data-parent-id="1-19-0">
<input type="checkbox" data-parent-id="1-19-1">
  </div>
<div>
  <input type="checkbox" data-parent-id="1-2">
<input type="checkbox" data-parent-id="1-2-0">
<input type="checkbox" data-parent-id="1-2-1">    
<input type="checkbox" data-parent-id="1-29">
<input type="checkbox" data-parent-id="1-29-0">
<input type="checkbox" data-parent-id="1-29-1">
  </div>

如果我正确理解你的问题，这将起到作用：

$('[data-parent-id="1-1"], [data-parent-id^="1-1-"]').prop('checked',true);

说明：选择器的第一部分正好得到1-1，第二部分得到以1-1-开头的任何内容。

我认为Mooseman的解决方案是最简单的。您还可以使用regex并更精确地筛选元素：http://jsfiddle.net/6hfryod2/.

$(function(){
    $("div > input[type='checkbox']").filter(function(index) {
        return /^(1-1)$|^(1-1-)/gi.test($(this).attr("data-parent-id"));
    }).prop("checked", true);
});

这里有一种方法，使用:not选择器：

$('[data-parent-id^=1-1]:not([data-parent-id^=1-19])').prop('checked',true);

其中：

  • [data-parent-id^=1-1]匹配以1-1开头的所有属性：
    • 1-1
    • 1-1-0
    • 1-1-1
    • 1-19
    • 1-19-0
    • 1-19-1
  • :not([data-parent-id^=1-19])排除以1-19开头的所有属性：
    • 1-19
    • 1-19-0
    • 1-19-1
相关文章：