jQuery Inverse of Selection

Question

Give the code below, I want to select only those divs that have a data-PType attribute containing ABC or DEF or GHI. In the listing below then, I want to select divs with ids 1, 3 and 5.

I also need a second selection of all divs where the data-PType attribute contains none of the follow: ABC, DEF GHI. In the listing below then, I want to select divs with ids 2 and 6.

You can see the second selection is essentially the negation of the divs in the first selection. I was hoping it might be possible to express the second selection in terms of the inverse or negation of the first, somehow.

Note that the div with id='4' should never be selected since it has no data-PType attribute.

<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

If you prefer jquery selectors,

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 2

You can get the value of data attribute like below example and can check the value with indexOf function.

Example:

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 3

You can put the condition values in an array and iterate it.

$(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);    
    }
  });
});

Negation:

$(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);    
    }
  });
});

Here's fiddle:
http://jsfiddle.net/euoht510/9/