Question

我设法获得了另一个线程的帮助，用于使用JavaScript（Issue with changing the title of a link using jQuery）更改元素的标题和链接。

我已经尝试在我的网站上将该技术应用到另一个元素，但我遇到了错误Error 404: The page your are looking for cannot be found.

因此，虽然这段代码是孤立的：

var href = jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>Click Here</a>";
jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').replaceWith(link);

以下代码会导致上述错误。

var href = jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').html();
var link = "<a href='"+href+"' target='_blank'>Click Here</a>";
jQuery('#_tab_1 > div > div > div:nth-child(3) > div > div.pf-body > ul > li:nth-last-child(1) > p.item-property').replaceWith(link);

var href2 = jQuery('#c27-single-listing > section > div.profile-cover-content.reveal.reveal_visible > div > div > ul > li:nth-child(3) > div').html();
var link2 = "<a href='"+href2+"' target='_blank'>Click Here</a>";
jQuery('#c27-single-listing > section > div.profile-cover-content.reveal.reveal_visible > div > div > ul > li:nth-child(3) > div').replaceWith(link2);

附件是我定位的html代码的链接（Link）。请注意，该链接仅反映与我无法工作的javascript代码相关的html，即。 href2。我没有发布href所针对的细分，因为它可能会变得太乱。我的目的是将www.hotmail.com替换为Click Here，但用户应该能够选择Click Here并将其引导至www.hotmail.com。另外，因为我只需要选择html的相关部分，所以你在链接中查看的选择器将与我上面的代码中所述的不同。

感谢您的帮助。

Answer 1

这是一个可以满足您的需求的片段。请注意，您可以使用类（对于多个元素）或id（对于单数元素）。

基本上，我使用了几个命令来做你想做的事：

each() - 应为选择器找到的每个元素执行以下函数。 this将引用DOM元素
text() - 返回该项目的文本（不含html）
replaceWith() - 将用您想要的任何内容替换元素

在此示例中，具有类should-become-link的每个项目将在2秒后成为链接（因为setTimeout）。元素内的原始文本将用作新的href值。

$(document).ready(function() {
  setTimeout(function() {
    var element = $('.should-become-link');
    element.each(function(index) {
      var $this = $(this);
      var currentText = $this.text();

      $this.replaceWith(
        `<a href="${currentText}" target="_blank">Click Here</a>`
      );
    });
  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="buttons medium button-outlined should-become-link">
  https://www.hotmail.com
</div>

<div><a href="http://www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>
<div><a href="//www.google.com" target="_blank">shouldn't change!</a></div>

<div class="buttons medium button-outlined should-become-link">
  https://www.google.com
</div>

这是一个codepen

Answer 2

使用:eq()选择器选择第4个li，然后替换其内容：

HTML：

 <div id="buttons medium button-outlined">https://www.hotmail.com</div>

JQuery的：

var href2 = $('.container li:eq(3) > .buttons').html();
var link2 = "<a href='"+href2+"' target='_blank'>Click Here</a>";
$('.container li:eq(3) > .buttons').replaceWith(link2);

工作演示here

使用Javascript选择div导致找不到页面错误

2 个答案: