jQuery 异或选择器

Question

我想从一组 div 中 select 所有包含特定属性的 div，然后 select 所有不包含任何属性的 div。

示例：

<div data-attr="1"></div>
<div data-attr="2"></div>
<div data-attr="3"></div>
<div data-attr="4"></div>
<div data-attr="5"></div>

var attrList = [3,4];

// I want to process every div containing attr 3 and 4
attrList.forEach(function(item){
    var div = $("[data-attr='"+item+"']");
    div.operation_here()
});

// but I also want to process the remaining divs that do not contain neither attr 3 and 4
/* HELP ME HERE - this would select divs with attr 1, 2 and 5 */

如何实现？

Answer 1

var $divs = $('div').filter(function() {
  // returns all divs with data-attr not equal 1 or 2 or 5
  return [1, 2, 5].indexOf(this.data('attr')) == -1;
});

HTML:

<div data-attr="2">not matched</div>
<div data-attr="5">not matched</div>
<div data-attr="6">matched</div>

Answer 2

循序渐进。首先，select全部div：

var $div = $('div[data-attr]');

那么，select你需要的：

var $valid_div = $div.filter(function(){
     return attrList.indexOf($(this).data('attr')) > -1;
});

现在您可以对 div 与您的变量进行匹配操作：

$valid_div.operation_here();

至select剩余div，可以使用.not():

var $invalid_div = $div.not($valid_div);
$invalid_div.operation_here();

Answer 3

给定一个元素列表，您可以使用 jQuery.not 从另一个选择器中排除这些元素

$(function(){
  
    // I want to process every div containing attr 3 and 4
   var divs = $('div[data-attr="3"], div[data-attr="4"]');      
   console.log(divs);  // logs 2
  
   var notDivs = $('div[data-attr]').not(divs);
   console.log(notDivs); // logs the other 3
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-attr="1"></div>
<div data-attr="2"></div>
<div data-attr="3"></div>
<div data-attr="4"></div>
<div data-attr="5"></div>

jQuery 异或选择器

jQuery XOR selector

javascript

jquery

xor

jquery-selectors