我是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++;
});
您所看到的实际上不是代码或数据的重复，您在HTML中看到的是运行提供的javascript后的最终呈现。
从本质上讲，您提供的javascript可以找到具有项目类的项目的任何子项，并遍历每个元素。之后，它将更新一些属性以更改角色和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。您会发现最初没有课程，但是在应用了课程之后。但是，如果要在浏览器中进行检查，则会看到：
<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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句