獲取數組中的差異

Question

我在HTML中使用了兩個div，其中有多個跨度。我向用戶提供一個刪除按鈕，用戶可以刪除一些跨度（他必須先選擇）。現在想確定哪些span元素已被刪除。

如何比較兩個擁有Selector-Results的數組？

有沒有可能在C＃中使用像IEqualityComparer之類的東西？

Answer 1

婁jquery的解決方案

var firstArray = $("span.odd"); 
 
var secondArray = $("span.even"); 
 

 
var compareResult = $(firstArray).not(secondArray).length === 0 && $(secondArray).not(firstArray).length === 0; 
 

 
console.log("Collections are equal:",compareResult); 
 

 
var collectionDiff = secondArray.filter(function(){ 
 
    return secondArray.filter(this).length 
 
}); 
 

 
console.log("diff",collectionDiff.toArray());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <span class="odd">span 1</span> 
 
    <span class="even">span 2</span> 
 
    <span class="odd">span 3</span> 
 
    <span class="even">span 4</span> 
 
    <span class="odd">span 5</span> 
 
    <span class="even">span 6</span> 
 
    <span class="odd">span 7</span> 
 
    <span class="even">span 8</span> 
 
    <span class="odd">span 9</span> 
 
    <span class="even">span 10</span>

Answer 2

您可以創建一個這樣的自定義功能。

var array1= [4,8,9,10,34], 
    array2= [4,9,10,11,12,13], 
    differnce = arrayDiffr(array1,array2); 


     function arrayDiffr(a1, a2) 
     { 
      var a = [], diff = []; 

      for (var i = 0; i < a1.length; i++) { 
       a[a1[i]] = true; 
      } 

      for (var i = 0; i < a2.length; i++) { 
       if (a[a2[i]]) { 
        delete a[a2[i]]; 
       } else { 
        a[a2[i]] = true; 
       } 
      } 

      for (var k in a) { 
       diff.push(k); 
      } 

      return diff; 
     } 
     console.log(differnce) //differnce return :[8,11,12,13,34] 

Answer 3

我想和大家分享我的結果：

我有一個jQuery的過濾器調用來獲取這些東西被選中，現在可以使用這個集合的事情打電話給另一個過濾器進一步，並進一步明確結果到一些特定的屬性。

@Vlad Ionut有最好的建議，謝謝。

Answer 4

可能你可以做一些如下。我使用數據集API來標記要刪除的跨度。除此之外，還有一些ES6功能被使用，例如傳播運算符。因此，請確保您的瀏覽器正常。代碼很自我解釋。

function getDifference(a,b){ 
 
    return a.filter(e => !b.some(f => f.textContent === e.textContent)); 
 
} 
 

 
function toggleDelete(e){ 
 
    var del = e.currentTarget.dataset.toBeDeleted === "true"; 
 
    e.currentTarget.dataset.toBeDeleted = del ? "false" : "true"; 
 
    del = !del; 
 
    e.currentTarget.className = del ? "tbd" : ""; 
 
} 
 

 
function deleteSelectedSpans(e){ 
 
    var deletedSpans; 
 
    for (var span of spans) span.dataset.toBeDeleted === "true" && span.parentElement.removeChild(span); 
 
    spans = [...myDiv.querySelectorAll("span")]; 
 
    deletedSpans = getDifference(spansCopy,spans); 
 
    for (var deletedSpan of deletedSpans) deletedSpansList.appendChild(deletedSpan); 
 
} 
 

 
var spans = [...myDiv.querySelectorAll("span")], 
 
spansCopy = spans.slice(); 
 
for (var span of spans) { 
 
    span.dataset.toBeDeleted = "false"; 
 
    span.addEventListener("click",toggleDelete); 
 
} 
 

 
myButton.addEventListener("click",deleteSelectedSpans);

div {text-align  : center; 
 
     background-color : white; 
 
     border   : solid thistle 2px; 
 
     border-radius : 5px; 
 
     padding   : 10px;} 
 
span {background-color : white; 
 
     border   : solid thistle 2px; 
 
     border-radius : 5px; 
 
     align   : center} 
 
.tbd {background-color : tomato; 
 
     color   : white; 
 
     border   : solid pink 2px; 
 
     border-radius : 5px} 
 
button {display   : block; 
 
     margin   : 10px auto}

<div id="myDiv"> 
 
    <span>Span-1</span> 
 
    <span>Span-2</span> 
 
    <span>Span-3</span> 
 
    <span>Span-4</span> 
 
    <span>Span-5</span> 
 
    <span>Span-6</span> 
 
    <button id="myButton">Delete Selected Spans</button> 
 
    <div id="deletedSpansList">Deleted Spans:</div> 
 
</div>