匹配两个数组与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元素

回答

相关问题