使用jQuery或javascript将href替换为其他内容

Replace the href to something else using jQuery or javascript

本文关键字：其他 替换 href jQuery javascript 使用      更新时间：2023-09-26

这是我的HTML，我想改变href属性从http://google.com到别的东西，请注意，这个链接不应该改变http://google.com/home/inner_links。我不能编辑html，所以寻找使用jQuery或Javascript的解决方案。谢谢。

<div class="branding">
  <a href="http://google.com">
    <img class=" preload-me"/>
  </a>
  <a href="http://google.com">
    <img class=" preload-me"/>
  </a>
  <a href="http://">
<div class="main-menu">
    <ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div>
</div>

代码片段的问题

首先，它不是一个完整的文档，而是一个代码片段，因此它不包括适当的标题。我们可以忽略这种理解，即所提供的代码属于一个更大的文档。

这样的代码片段中存在以下问题:

  • img标签需要一个非空的src属性和一个alt属性。

  • a标签在href属性中需要一个有效的url值。

  • <a href="http://">似乎没有结束标签

  • 最后是没有意义的<li<a href="http://google.com/home/inner_links">

现在，这是没有问题的，但假设您有以下片段:

<div class="main-menu">
    <ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div>

我们可以看到你有关闭li和ul标签。因此，我希望您尝试如下操作:

<div class="main-menu">
    <ul><li><a href="http://google.com/home/inner_links"></a></li></ul>
</div>
<标题> 解决方案

我建议用来编辑href值的代码如下:

$('.branding').find('img').parent().attr('href', 'newhref');

也就是选择所有在类为"branding"的元素中的img的父元素，并设置它们的href属性。

带有原始代码片段的演示

$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
  <a href="http://google.com">
<img class=" preload-me"/>
  </a>
  <a href="http://google.com">
<img class=" preload-me"/>
  </a>
  <a href="http://">
<div class="main-menu">
<ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div>
</div>

演示代码片段和建议修复

$('.branding').find('img').parent().attr('href', 'newhref');
<!DOCTYPE html><head><title>demo</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<div class="branding">
  <a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
  </a>
  <a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
  </a>
  <a href="http://example.com">link</a>
<div class="main-menu">
<ul><li><a href="http://google.com/home/inner_links">link</a></li></ul>
</div>
</div>

注释:除了修复之外，我还从片段创建了一个完整的文档，将标题设置为"demo"，使用lorempixel作为图像，将无效url设置为http://example.com，并添加了文本"link"

jquery:

$('.branding a').attr('href', YOUR VALUE)

或

$('a[href="http://google.com"]').attr('href', YOUR VALUE)

问题处的html无效。

<div class="branding"> <!-- 1) where is closing tag for this `DIV` element? -->
  <a href="http://google.com">
    <img class=" preload-me"/>
  </a>
  <a href="http://google.com">
    <img class=" preload-me"/>
  </a>
  <a href="http://">
<div class="main-menu"><!-- 2) where is closing tag for this `DIV` element? -->
    <!-- `UL` is not permitted child of `A` element -->
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a -->
    <ul><li<a href="http://google.com/home/inner_links"></a></li></ul>
</div><!-- is this closing `DIV` tag for 1) or 2) ? -->

应该在更改无效html的href之前更改。如果你不能自己更改html，你应该询问提供html的人，为什么它被交付无效;并要求在继续之前将其更改为有效的html。

然后调整<a>元素的href

jquery: 

$(document).ready(function() {
    $("img").parent().attr("href", some url);
});

这里有一个示例代码-我在我的项目中有类似的需求。你可以根据自己的需要改变。

注意:alert() -仅用于演示。

$(document).ready(function(e) {
var currentUrl= $("a").attr('href');
 newEditUrl = currentUrl.replace("http://google.com", "http://google.com/home/inner_links");
 alert(newEditUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
  <a href="http://google.com">
    <img class=" preload-me" />
  </a>
  <a href="http://google.com">
    <img class=" preload-me" />
  </a>
  <a href="http://">
    <div class="main-menu">
      <ul>
        <li<a href="http://google.com/home/inner_links">
  </a>
  </li>
  </ul>
  </div>

试试这样做，

 function changeHref(){
    document.getElementsByTagName("a").href="Someplace.com";
 }

另外，您想具体更改哪个链接?还是你想全部更改?

相关文章：