javascript - HTML 类的 jQuery .each() 迭代 - 定义了依赖于订单类的不一致行为

Question

我使用 jQuery 的 $.each() 方法来迭代属于某个类(例如 class="definition")成员的所有 DOM 元素，然后将每个元素的 ID 打印到控制台。但是，迭代似乎仅适用于首先定义指定类的元素。因此，对于具有多个类的元素，如果指定的类没有在 HTML 中首先列出，则它看起来像是“被跳过”。

例如:

HTML

<p class="definition" class="snippet" id="P1">Paragraph 1</p>
<p class="open" class="definition" class="snippet" id="P2">Paragraph 2</p>
<p class="snippet" class="definition" id="P3">Paragraph 3</p>
<p class="definition" class="snippet" id="P4">Paragraph 4</p>
<p class="definition" id="P5">Paragraph 5</p>

JavaScript

$( document ).ready(function() {
    $(".definition").each(function() {
        console.log(this.id);
    });
});

在上面的示例中，控制台记录了 P1、P4 和 P5 的 ID，但不记录其他的 ID。

定义类的键入顺序是否应该决定 jQuery 的 $.each() 是否按类识别元素？

Answer 1

使用

<p class="definition snippet" id="P1">Paragraph 1</p>

相反。

当您第二次设置类属性时，它会重写第一次。
这:

<p class="definition" class="snippet" id="P1">Paragraph 1</p>

与

相同

<p class="snippet" id="P1">Paragraph 1</p>

您还可以使用控制台检查真实的 html 代码。