Получить разницы в массивах

Question

Я использую два div в HTML, в которых у меня несколько интервалов. Im, предоставляющий кнопку удаления пользователю, с помощью которого он может удалить некоторые промежутки (которые он должен выбрать раньше). И теперь хотите определить, какие элементы span были удалены.

Как сравнить два массива, которые содержат селектор-результаты?

Есть ли возможность использовать что-то вроде IEqualityComparer в C#?

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>