Question

给出以下代码，我只想选择具有data-PType属性且包含ABC或DEF或GHI的那些div。然后，在下面的清单中，我要选择ID为1、3和5的div。

我还需要所有div的第二个选择，其中data-PType属性不包含以下内容的{em> none ：ABC，DEF GHI。然后，在下面的清单中，我要选择ID为2和6的div。

您可以看到第二个选择实质上是第一个选择中div的取反。我希望有可能以某种方式用第二种选择的反或否定来表达第二种选择。

请注意，永远不要选择id ='4'的div，因为它没有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);    
    }
  });
});

这里是小提琴：
http://jsfiddle.net/euoht510/9/

jQuery逆选择

3 个答案: