-1

给出下面的代码，我只想选择那些具有包含or或data-PType属性的div 。在下面的清单中，我想选择 id 为 1、3 和 5 的 div。ABCDEFGHI

我还需要对 data-PType 属性不包含以下任何内容的所有 div 进行第二次选择：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>
4

3 回答 3

0

您可以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>

于 2018-07-11T04:05:06.290 回答
0

如果您更喜欢 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>

于 2018-07-11T04:35:40.483 回答
0

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

$(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/

于 2018-07-11T04:36:46.680 回答