Javascript Jquery.load（）仅适用于前6个元素，带有数据值

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

html:

---

js（仅适用于第一个元素）：

window.addEventListener（'load'，function（）{
var recentviews=$（“#recentviews”）.data（'recentviews'）；
$（“#最近视图”）。每个（函数（索引，元素）{
$（“#最近视图”）。加载（“http://example.com“+最近的视图）；
回归指数<5；
});
}); 

---

谢谢。

因为元素的ID必须是唯一的，所以使用类来分组类似的元素，而不是ID

<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 -->

您需要删除（或修改）

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 -->

---

您需要删除（或修改）

id

属性，因为它们在页面中必须是唯一的。id必须是唯一的，因此获取

$（“#recentviews”）

将只返回第一个元素，因为它不需要任何其他元素。将id更改为类，并使用

$（'.recentviews'）

代替

$（“.recentviews:lt（7）”。

应该是

$（“.recentviews:lt（6）”。

我认为对我来说最好。我会在2分钟内接受这个答案。谢谢！没问题，很乐意帮忙。

<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).load(function () {
    //get all elements with recentViewes class and take first 6 from that and loop
    $(".recentViewes").slice(0, 6).each(function (index, element) {
        //inside the loop use this to refer to the current recentViewes element and load the resource 
        $(this).load("http://example.com" + $(this).data('recentviewes'));
    });
});

<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 -->