javascript - Jquery .load() 仅适用于前 6 个元素，带有数据值

Question

我有 7 个 html div。如何使用 data-recentviewes 作为每个元素的加载 URL 仅为前 6 个 div 加载一些动态数据？

html:

    <div id="recentViewes" data-recentviewes="/123/"></div>
    <div id="recentViewes" data-recentviewes="/456/"></div>
    <div id="recentViewes" data-recentviewes="/789/"></div>
    <div id="recentViewes" data-recentviewes="/321/"></div>
    <div id="recentViewes" data-recentviewes="/654/"></div>
    <div id="recentViewes" data-recentviewes="/987/"></div> <!-- 6 -->
---
    <div id="recentViewes" data-recentviewes="/abc/"></div> <!-- dont load this -->

js(仅适用于第一个元素):

window.addEventListener('load', function () {
    var recentviewes = $("#recentViewes").data('recentviewes');    
    $("#recentViewes").each(function(index, element) {
        $("#recentViewes").load("http://example.com" + recentviewes);                   

        return index < 5;
    });
}); 

谢谢。

Answer 1

您需要删除(或修改)id 属性，因为它们在文档上下文中需要是唯一的。这就是为什么您的代码仅适用于第一个元素。

您应该将它们更改为 class 属性。然后，您可以使用 :lt 选择器选择所需的元素:

<div class="recentViewes" data-recentviewes="/123/"></div>
<div class="recentViewes" data-recentviewes="/456/"></div>
<div class="recentViewes" data-recentviewes="/789/"></div>
<div class="recentViewes" data-recentviewes="/321/"></div>
<div class="recentViewes" data-recentviewes="/654/"></div>
<div class="recentViewes" data-recentviewes="/987/"></div> <!-- 6 -->

<div class="recentViewes" data-recentviewes="/abc/"></div> <!-- dont load this -->

window.addEventListener('load', function () {
    $(".recentViewes:lt(6)").each(function() {
        $(this).load("http://example.com" + $(this).data('recentviewes'));
    });
});