【问题标题】:How to change the href through javascript or jquery? [duplicate]如何通过javascript或jquery更改href? [复制]
【发布时间】:2017-05-05 20:31:35
【问题描述】:
<div id="div-id"><ul><li><a target="_blank" href="www.google.com">google</a> </li></ul></div>

如何通过javascript(不是通过getElementById,因为它在html中没有提到)或jquery更改href?

【问题讨论】:

  • 你有什么代码?你已经测试了什么?
  • 请阅读How to Ask。关键词:“搜索和研究”和“解释......任何阻碍你自己解决的困难”。
  • 你说的“不是通过getElementById,因为它没有在html中提到”是什么意思? getElementById 是 JavaScript。
  • 您可以尝试$('ul li a').attr('href', 'www.stackoverflow.com'),但请注意,如果页面上有多个 ul > li > a 订单,这将不起作用。

标签: javascript jquery


【解决方案1】:

$("body").ready(function() {
  $("ul li a").attr("href", "http://www.stackoverflow.com/")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <li> <a target="_blank" href="www.google.com">google</a> </li> </ul>

这是一种简单的方法,但现在它适用于所有 Links,因为您没有选择器(类或 id)

【讨论】:

    【解决方案2】:

    更准确地说,使其仅适用于特定的锚元素

    $("body").ready(function() {
      $("ul >li >a:contains("google").attr("href", "http://www.stackoverflow.com/")
    })
    

    【讨论】:

      【解决方案3】:

      document.getElementById() 不是在文档中查找元素的唯一方法。你可以使用相当健壮的选择器,比如document.querySelector()。举个极其简单的例子:

      <ul>
        <li>
          <a target="_blank" href="www.google.com">google</a>
        </li>
      </ul>
      
      <script type="text/javascript">
        var element = document.querySelector('a');
        element.href = 'http://example.com';
      </script>
      

      由于在给定的标记中,目标链接是 DOM 中的 only a 元素,简单的选择器 'a' 将识别它。在更复杂的文档中,您可以使用更复杂的选择器。例如:

      document.querySelector('ul > li > a')
      

      甚至:

      document.querySelector('a[href="www.google.com"]')
      

      由于您还使用 jQuery 标记了问题,因此您也可以在此处使用相同的选择器概念。比如:

      $('a').attr('href', 'http://example.com');
      

      或:

      $('a[href="www.google.com"]').attr('href', 'http://example.com');
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-12-17
        • 1970-01-01
        • 1970-01-01
        • 2017-08-13
        • 1970-01-01
        • 1970-01-01
        • 2018-05-15
        • 2019-12-03
        相关资源
        最近更新 更多