javascript - 两次设置属性背后的想法是什么，一次在 html 中，然后在 jquery 中？

Question

我是 javascript 和 jquery 的新手，我在查看一些代码时发现这在任何地方都非常普遍。

<ul class="items">      
<li class="item" aria-controls="item-0" role="tab"> </li>
<li class="item" aria-controls="item-1" role="tab"> </li>
<li class="item" aria-controls="item-2" role="tab"> </li>
</ul>

“item”类的属性在 html 中设置，但随后在 jquery 中再次设置。为什么？

$(".items").find(".item").each(function () {
                    $Item = $(this);
                    $Item.attr("aria-controls", "item-" + (count));
                    $Item.attr("role", "tab");
                    count++;
                    });

Answer 1

您看到的实际上不是代码或数据的重复，您在 HTML 中看到的是您提供的 javascript 运行后的最终呈现。

本质上，您提供的 javascript 是查找具有 item 类的 items 的任何子项，并遍历每个元素。之后它正在更新一些属性以更改 Angular 色和 aria-controls。这是在多个元素上设置相同属性或(如此处所示)通过每次迭代附加到单个元素的简单方法。

var count = 0;
$(".test").find("p").each(function () {
  $Item = $(this);
  $Item.attr("id", "child" + count);
  $Item.attr("class", "extended-child");
  count++;
 });

.extended-child {
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>Hello</p>
  <p>World</p>
</div>

例如，在上面的示例中，在遍历 p 个子元素后，类将被更新以使文本变为红色并设置 ID。您会注意到最初没有类(class)，但是在应用类(class)之后。如果您要在浏览器中检查它，您会看到:

<div class="test">
   <p class="extended-child" id="child0">Hello</p>
   <p class="extended-child" id="child1">World</p>
</div>

但是正如您所见，添加的并不是最初的 HTML。

编辑

以下是上述内容的副本，但我将再次更新 HTML。 3 秒后，类将更新并更改文本颜色。

var count = 0;
$(".test").find("p").each(function () {
  $Item = $(this);
  $Item.attr("id", "child" + count);
  $Item.attr("class", "extended-child");
  count++;
 });
 
 setTimeout(function(){
 $(".test").find("p").each(function () {
  $Item = $(this);
  $Item.attr("class", "extended-child-two");
 })
 }, 3000)

.extended-child {
    color: red;
}

.extended-child-two {
    color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>Hello</p>
  <p>World</p>
</div>