jQuery .each仅适用于第一项

如何解决jQuery .each仅适用于第一项

我正在尝试预加载一个html文件，其内容随后将在遍布整个网站的几个可扩展按钮上使用。

问题在于，只有页面的第一个按钮的内容以这种方式加载，其余按钮在展开时什么也没有显示。

我确实注意到在SO上还有其他类似问题，但是我遇到的所有解决方案在这种情况下似乎都不起作用。因此，我们将不胜感激。

脚本的相关部分：

$(document).ready(function () {
     
    var thisLink = $("a.ajax-link");
    var targetUrl = thisLink.attr("data-href");
    var target = thisLink.data("ajaxtarget");
 
    $(target).each(function( index,btn ) {
        $(this).load(targetUrl,function () {
          console.log('Success');
        });
      });
    
});

如果还有其他有用的信息，请告诉我。 非常感谢您的宝贵时间

解决方法

假设选择器a.ajax-link选择了所有可扩展链接，那么var thisLink = $("a.ajax-link");将包含页面上所有可扩展链接元素的数组。因此，使用var target = thisLink.data("ajaxtarget");只会收到数组中第一个元素的数据属性。

解决方案很简单：

您需要为每个可扩展链接运行foreach循环，并从每个链接中获取相关数据。

$(document).ready(function () {
   $.ajax({
     url: "http://example.com/path/to/html/file",dataType: "html",success: function(html) {
        $.each($("a.ajax-link"),function() {
          let targetUrl = $(this).data('href');
          let $target = $($(this).data('ajaxtarget'));
          $target.load(targetUrl,function() {
            console.log('success');
          });
        });
     }
    });
});