Jquery .load()仅适用于前6个元素,具有数据值

Question

我有7个html div.如何使用data-recentviewes作为每个元素的load-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'));
    });
});