Question

我是jQuery的新手，现在我已经陷入困境了一段时间。我试图发现外部页面的所有链接并向其添加target =“_ blank”属性。到目前为止，我已经创建了以下脚本：

$(document).on('load',function() {
$('a').each(function () {
    if (location.hostname !== this.hostname) {
        $(this).attr('target', '_blank');
    }
});
});

这适用于第一个实例中页面上加载的元素，但是当动态添加新元素时，它不会再次触发以添加目标属性。我试图将“就绪”功能改为“on（'load'）”，但没有成功。

我们非常感谢任何帮助，感谢那些花一点时间回答这类愚蠢问题的人们。

编辑：我创建了无限滚动脚本，通过AJAX调用加载更多元素。这个元素包含“a”标签，我希望脚本能够再次运行。

Answer 1

每次添加新元素时都必须触发该功能。因为您是知道何时添加新链接的最佳人选，所以您必须以这种方式设置脚本。

function setTargetBlank () {
  $('a').each(function () {
    if (location.hostname !== this.hostname) {
      $(this).attr('target', '_blank');
    }
  });
}

// On load
$(function () {
  setTargetBlank();
  loadSomeContent(function () {
    // And after it is loaded, trigger again the function
    setTargetBlank();
  });
});

如果您无法控制这些，您只需设置一个定时器，它将始终每隔几秒触发一次该功能：

 // This is not really good for performance, but it will work
 // It will trigger the function every 3 seconds
 setInterval(setTargetBlank, 3 * 1000);

Answer 2

我会将您的链接更改代码包装在一个函数中，您可以调用a）onload和b）当您的内容发生更改时。

$(document).ready(function() {
  linkChanger();
});

function linkChanger() {
  $('a').each(function () {
      if (location.hostname !== this.hostname) {
          $(this).attr('target', '_blank');
      }
  });
}

然后如果您稍后添加内容/链接，可以调用linkChanger（）来再次检查/转换您的网页：

$('#something').click(function () {
  // code that gets more content, if async provide a callback that calls linkChanger()
  linkChanger();
});

Answer 3

您可能在创建新元素之前定位A链接，尝试在setTimeout函数中运行代码。例如

$(document).on('load',function() {

setTimeout(function(){ $('a').each(function () { if (location.hostname !== this.hostname) { $(this).attr('target', '_blank');
} }); }, 5000);

});

在动态添加的元素上添加目标

3 个答案: