检查div元素的子元素的顺序是否正确

Question

我有一个像下面这样的对象

<div class="some class">
<h3>This is H3 tag</h3>
<h1>Testing H1 element</h1>
<p>Hey this is p tag</p>
<h3>This is H3 tag</h3>
<h2>I am H2</h2>
<h3>This is H3 tag</h3>
<p><b>I am Bold</b></p>
<h4>I am H4<br></h4>
</div>

现在，如果div中的上述标记的顺序正确，我想返回true。正确的顺序应始终为
h1->h2->h3->h4。我们可以在两者之间有任何标签(例如：p，strong(
我在javascript文件中获得了上述对象，但不确定如何检查这些对象的顺序是否正确。

注意：可以有多个h1、h2、h3和h4标签。

Answer 1

一种方法是按顺序循环头元素，并使用它们的编号查看它是否与最后一个元素顺序一致

function isInOrder(className) {
let tagn = 0,
inOrder = true;
document.querySelector(className).querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(el => {
if (+el.tagName.slice(-1) < tagn) inOrder = false;
tagn = +el.tagName.slice(-1)
})
return inOrder;
}
console.log(isInOrder('.someClass'))
console.log(isInOrder('.someOtherClass'))

<div class="someClass">
<h3>This is H3 tag</h3>
<h1>Testing H1 element</h1>
<p>Hey this is p tag</p>
<h3>This is H3 tag</h3>
<h2>I am H2</h2>
<h3>This is H3 tag</h3>
<p><b>I am Bold</b></p>
<h4>I am H4<br></h4>
</div>
<div class="someOtherClass">
<h1>Testing H1 element</h1>
<h2>I am H2</h2>
<h3>This is H3 tag</h3>
<p>Hey this is p tag</p>
<h3>This is H3 tag</h3>
<h3>This is H3 tag</h3>
<p><b>I am Bold</b></p>
<h4>I am H4<br></h4>
</div>