如何使块中的所有链接在新选项卡中打开答案

【问题标题】：How to make all links in blocks open in a new tab如何使块中的所有链接在新选项卡中打开
【发布时间】：2019-12-07 00:38:16
【问题描述】：

我正在寻找一种方法来使页面上的所有链接在新标签页中打开。但这应该只适用于块内的链接。

这是用来查找页面上所有块的 sn-p。


jQuery.fn.PageBlocks = function() {
$("*").filter(function(index) {
    var $this = $(this);
    var tagName = $this.prop("tagName").toLowerCase();
    return $this.css("display") == 'block' || tagName == 'div';
});
}

现在我想在应该修改链接的target 属性的函数中使用此代码。

$(document).ready(function(){ 
    var res = $(document).PageBlocks();
    $.each(res, function(index, val) {
          val.querySelectorAll('a').attr("target", "_blank");
    });
});

看来我做错了。我该如何正确地制作它？谢谢。

【问题讨论】：

什么是“块”？为什么jQuery.fn.PageBlocks？ .attr() 是 jQuery 的方法，而不是 NodeList 的方法（document.querySelectorAll() 的返回值
"Any div wtih cutom class name" - 为什么不使用这个自定义类而不是获取 DOM 中的每个元素？ -> $(".myBlockElement:visibile")
我还是会选择$("div:visible a").attr("target", "_blank")
请提供html
@tuhin47 ，这是布局。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML5</title>  </head><body><div class="MyBlock"><a href="http:\\goo.me">Link</a><br> </div><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><script>$(document).ready(funct... </script></body></html>

标签： javascript jquery replace hyperlink

【解决方案1】：

此代码现在可以工作了。在您的代码中，jQuery.fn.PageBlocks 不起作用，$(document).PageBlocks() 返回 undefine。工作link

<head>
  <meta charset="utf-8" />
  <title>HTML5</title>
</head>

<body>
  <div class="MyBlock"><a href="http:\\goo.me">Link</a><br> </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
  </script>
</body>

</html>

<script>
  $(document).ready(function() {
    var res = $("*").filter(function() {
      var $this = $(this);
      var tagName = $this.prop("tagName").toLowerCase();
      return $this.css("display") == 'block' && tagName == 'div';
    });
    // console.log(res);

    $.each(res, function(index, val) {
      $(val).find('a').attr("target", "_blank");
    });
  })
</script>

【讨论】：

这是因为在过滤器中您设置了return $this.css("display") == 'block' || tagName == 'div';。应该是return $this.css("display") == 'block' && tagName == 'div';
您的 PageBlocks() 不起作用，因为您没有为此函数设置任何返回类型。所以每次都返回未定义。您应该返回过滤后的值。
已经提到了。这是因为在过滤器中设置了return $this.css("display") == 'block' || tagName == 'div';。应该是return $this.css("display") == 'block' && tagName == 'div'; 所以。应该有和条件没有或根据您的选择。
现在可以用了吗？对了别忘了标对:)
再次感谢您！您能否解决 PageBlocks 的返回值类型的问题？这样我就知道那里的错误是什么。什么是正确的声明？

【解决方案2】：

.attr() 是 jQuery 的方法，而不是 NodeList 的方法：

$(document).ready(function(){ 
   var res = $(document).PageBlocks();
   $.each(res, function(index, val) {
      $(val).find('a').attr("target", "_blank");
   });
})

【讨论】：

是的，我错过了一个 jQuery 选择器，我编辑了答案
仍然对我不起作用。可能是 PageBlocks() 插件不起作用？至少<div class="myClass"> <a href="http:\\goo.me">Link</a><br> </div> 没有获得“目标”属性。有什么线索吗？感谢您的帮助。

【解决方案3】：

这是可以提供帮助的代码！！

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class='classBlock'>
<a id='a1' href='https://www.w3schools.com'>click me open</a><br />
<a id='a2' href='https://www.w3schools.com'>click me open</a><br />
<a id='a3' href='https://www.w3schools.com'>click me open</a><br />
</div>

<script>
$(document).ready(function(){
$('.classBlock').find('a').prop('target', '_blank');
});

</script>

</body>
</html>

如果有任何帮助，请随时联系我...

【讨论】：

谢谢，@尼克斯。该代码很酷，但它仅针对特定类。我以前有过这个$(document).ready(function() { $( "div" ).each(function( index ) { $(this).find('a').attr("target", "_blank"); }); });。我希望它也适用于任何“div”和 block elements，这样我就不必指定类名或 ID。