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

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

这是一个可以满足您需求的 sn-p。 请注意，您可以使用类（用于多个元素）或 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