jQuery Inverse of Selection

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>

3 answers

  • answered 2018-07-11 04:05 John R

    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>

  • answered 2018-07-11 04:35 Sangram Nandkhile

    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>

  • answered 2018-07-11 04:36 Nitin Sawant

    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/