jQuery XOR選擇器

Question

我要從一組div中選擇包含特定屬性的所有div，然后選擇不包含任何屬性的所有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

逐步進行。 首先，選擇所有div：

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

---

然后，選擇您需要的那些：

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

現在您可以對div與變量進行匹配：

$valid_div.operation_here();

---

要選擇剩余的div，可以使用.not() ：

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

Answer 2

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 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>