jQuery 选择的逆

Question

给出下面的代码，我只想 select 那些 div 具有包含 ABC 或 DEF 或 [=] 属性的 data-PType 15=]。那么在下面的清单中，我想 select divs 的 ID 为 1、3 和 5。

我还需要所有 div 的第二个 selection，其中 data-PType 属性包含以下 none： ABC、DEF GHI。那么在下面的清单中，我想 select divs 与 id 2 和 6.

你可以看到第二个 selection 本质上是第一个 selection 中 divs 的否定。我希望有可能以某种方式用第一个的倒数或否定来表达第二个 selection。

请注意，id='4' 的 div 不应该被 select 编辑，因为它没有 data-PType 属性。

<div id="1" data-PType="ABC"></div>
<div id="2" data-PType="QST"></div>
<div id="3" data-PType="ABC DEF"></div>
<div id="4"></div>
<div id="5" data-PType="GHI"></div>
<div id="6" data-PType="UVW"></div>

Answer 1

您可以获取 data 属性的值，如下例所示，并可以使用 indexOf 函数检查该值。

示例：

var list1 = [],
  list2 = [];
$("div").each(function() {
  var value = $(this).data("ptype");
  if (value) {
    if (value.indexOf("ABC") != -1 || value.indexOf("DEF") != -1 || value.indexOf("GHI") != -1) {
      list1.push(this);
    } else list2.push(this);
  }
});
console.log(list1, list2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" data-PType="ABC">1</div>
<div id="2" data-PType="QST">2</div>
<div id="3" data-PType="ABC DEF">3</div>
<div id="4">4</div>
<div id="5" data-PType="GHI">5</div>
<div id="6" data-PType="UVW">6</div>

Answer 2

如果您更喜欢 jquery 选择器，

var sel1 = $("[data-PType*='ABC'],[data-PType*='DEF'],[data-PType*='GHI']");
var sel2 = $("div[data-PType]:not([data-PType*='ABC']):not([data-PType*='DEF']):not([data-PType*='GHI'])");
console.log.apply(console, sel1);
console.log('---------');
console.log.apply(console, sel2);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1" data-PType="ABC"></div>
<div id="2" data-PType="QST"></div>
<div id="3" data-PType="ABC DEF"></div>
<div id="4"></div>
<div id="5" data-PType="GHI"></div>
<div id="6" data-PType="UVW"></div>

Answer 3

您可以将条件值放入数组中并对其进行迭代。

$(document).ready(function(){
  var valid = ['ABC','DEF','GHI'];
  var $divs = $("div[data-PType]");
  $divs.each(function(i,e){
    var $e = $(e);
    var $attr = $e.attr("data-PType");
    var splitted = $attr.split(' ')
    var IsValid = false;
    $(valid).each(function(x,y){
      if(splitted.indexOf(y) > -1){
        IsValid = true;
      }    
    });
    if(IsValid){
      console.log($e);    
    }
  });
});

否定：

$(document).ready(function(){
  var valid = ['ABC','DEF','GHI'];
  var $divs = $("div[data-PType]");
  $divs.each(function(i,e){
    var $e = $(e);
    var $attr = $e.attr("data-PType");
    var splitted = $attr.split(' ')
    var IsValid = false;
    $(valid).each(function(x,y){
      if(splitted.indexOf(y) > -1){
        IsValid = true;
      }    
    });
    if(!IsValid){
      console.log($e);    
    }
  });
});

这是fiddle：
http://jsfiddle.net/euoht510/9/

jQuery 选择的逆

jQuery Inverse of Selection

jquery

jquery-selectors

jquery-attributes