匹配兩個數組與HTML元素

我想運行一個函數，只有當我的兩個數組中的HTML匹配。試圖更改數組toString（）將數組中的HTML更改爲「Object HTMLElement」，這不起作用。使用array.outerHTML（）返回一個與array.val（）相同的錯誤。我寧願不做雙重循環，但我甚至嘗試過，但仍然沒有。這應該很簡單，我錯過了什麼？匹配兩個數組與HTML元素

語境：我試圖讓西蒙遊戲http://codepen.io/zjmitche/pen/MpWzop?editors=1010

//array content in console 
var arrayOne = [section#three.square4, section#one.square4, section#three.square4, section#three.square4] 
var arrayTwo = [section#three.square4, section#one.square4, section#three.square4, section#two.square4] 

function nextCount() { 
    if (arrayOne === arrayTwo) { 
    //do something 
    { 
}

試圖for循環：

for (var i = 0; i < arrayOne.length; i++) { 
    for (var j = 0; j < arrayTwo.length; j++) { 
    if (arrayOne[i] != arrayTwo[j]) { 
     alert("test") 
     arraysMatch = false; 
    } 
    } 
}

來源

2017-03-03 Zach

內容和順序是否需要匹配，或只是內容？ –

數組需要匹配所有內容並訂購 – Zach

你是說數組中的元素是對HTML元素的引用，並且你想比較元素內容嗎？無論您比較哪種類型的單個循環，只需要將每個元素與另一個數組中相同索引的對應元素進行比較即可。關於'.outerHTML（）'給出錯誤，那將是因爲它是一個屬性，而不是函數：刪除括號。 – nnnnnn

嗯，首先，你只需要一個循環，因爲如果長度不同他們顯然不匹配。然後，使用JSON.stringify到複雜的數值容易地比較：

arraysMatch = true; 

if (arrayOne.length !== arrayTwo.length) { 
    arraysMatch = false; 
} else { 
    for (var i = 0; i < arrayOne.length; i++) { 
    // Use JSON.stringify to get deterministic strings of non-primitives 
    var currVal1 = JSON.stringify(arrayOne[i]); 
    var currVal2 = JSON.stringigy(arraytwo[i]); 
    if (currVal1 !== currVal2) { 
     arraysMatch = false; 
     break; // No reason to keep going through the loop any more 
    } 
    } 
}

來源

2017-03-03 01:37:24

我不認爲'JSON.stringify（）'會幫助比較HTML元素。（當我在HTML元素上運行它時，我會得到''{}「'）。 – nnnnnn

@nnnnnn你能告訴你如何生成數組嗎？ –

好的，我嘗試了這幾種不同的方式，我得到了同樣的東西「{}」。 – Zach

如果你想爲平等馬赫兩個HTML的陣列和運行基於結果的功能，請嘗試以下代碼：

function areArraysEqual(x, y) { 
 
\t if (x === y) { 
 
\t \t return true; 
 
\t } 
 
\t if (!(x instanceof Object) || !(y instanceof Object)) { 
 
\t \t return false; 
 
\t } 
 
\t if (x.constructor !== y.constructor) { 
 
\t \t return false; 
 
\t } 
 
\t for (var p in x) { 
 
\t \t if (x.hasOwnProperty(p)) { 
 
\t \t \t if (!y.hasOwnProperty(p)) { 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t if (x[p] === y[p]) { 
 
\t \t \t \t continue; 
 
\t \t \t } 
 
\t \t \t if (typeof(x[p]) !== "object") { 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t \t if (!areArraysEqual(x[p], y[p])) { 
 
\t \t \t \t return false; 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t for (p in y) { 
 
\t \t if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) { 
 
\t \t \t return false; 
 
\t \t } 
 
\t } 
 
\t return true; 
 
} 
 
\t 
 
var array1 = document.getElementsByTagName('section'); 
 
var array1R=[]; 
 
for(var i = 0; i<array1.length; i++){ 
 
\t array1R.push(document.getElementsByTagName('section')[i].outerHTML); 
 
} 
 
var array2 = document.getElementsByClassName('myclass'); 
 
var array2R=[]; 
 
for(var i = 0; i<array2.length; i++){ 
 
\t array2R.push(document.getElementsByClassName('myclass')[i].outerHTML); 
 
} 
 
var matchingElements = areArraysEqual(array1R, array2R); 
 
if(matchingElements === true){ 
 
\t console.log('Arrays of HTML are equal. Run function here'); 
 
} 
 
else{ 
 
\t console.log('Arrays of HTML are not equal.'); 
 
}

<section class="myclass">Section 1</section> 
 
<section class="myclass">Section 2</section> 
 
<section class="myclass">Section 3</section> 
 
<section class="myclass">Section 4</section> 
 
<section class="myclass">Section 5</section> 
 
<section class="myclass">Section 6</section>

來源

2017-03-03 04:03:32 Mamun

匹配兩個數組與HTML元素

回答

相關問題