javascript 元素 ":last" 混淆答案

【问题标题】：javascript element ":last" confusionjavascript 元素 ":last" 混淆
【发布时间】：2015-06-10 15:36:29
【问题描述】：

我有一个关于 javascript 代码与 HTML 代码交互的问题。

在我正在进行的这部分讲座中，我将使用 for 循环将我的工作信息放入一个 .js 文件中，然后与其他 .js 和 .html 文件交互以输出我在 index.html 上的工作/角色，我这样做了：

for (var i = 0; i < work.length; i++) {
    var role = HTMLworkTitle.replace("%data%",work[i].role);
    var employer = HTMLworkEmployer.replace("%data%",work[i].name);
    var description = HTMLworkDescription.replace("%data%",work[i].Description);
    var employerinfo = employer + role;
    $("#workExperience").append(HTMLworkStart);
    $(".work-entry:last").append(employerinfo);
}

代码运行良好，但我试图理解为什么我们在“.work-entry:last”中需要“:last”。另一个文件 helper.js 只有一个元素条目作为“work-entry”的开头，如下所示：

var HTMLworkStart = '<div class="work-entry"></div>';
var HTMLworkEmployer = '<a href="#">%data%';
var HTMLworkTitle = ' - %data%</a>';

所以我尝试取出“:last”，结果开始对“employerinfo”输出进行随机重复。

【问题讨论】：

你能显示你的 html 吗？
我猜employerinfo 也包含一个带有work-entry 类的div
可能代码只寻找“一个”匹配...所以尝试使用:first 并查看它的行为相同。该文档将对您有所帮助，api.jquery.com/last-selector

标签： javascript jquery html

【解决方案1】：

:last 是一个 jQuery 特定的元选择器。请参阅文档中的示例进行说明。它所做的是仅选择当前选择中的最后一个元素。由于work-entry 是一个 CSS 类，它暗示可能有多个 DOM 元素分配给这个类。但是您的代码似乎只想将employerinfo 附加到您页面上的最后一个work-entry。我想代码是在将新雇主添加到您的 DOM 之后执行的。因此，如果您没有 :last，它会将当前的 employerinfo 附加到已经存在的雇主，而不是仅附加新的雇主。

【讨论】：