在包含匹配 classes 的 class 中使用 javascript 更改 href

Question

所以我有这个 html 代码 jquery 导入

<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<div class="col-xs-12 col-sm-7 col-md-12  no_padding" id="vdp_buttons">
    <a href="/quote/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-2">
    Request Something     
    </a><br>
    <a href="/test_drive/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-2">
    Test Something   
    </a><br>
    <a href="/availability/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-3">
    Check Something 
    </a><br>
    <a href="/appraisal/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-3">
    Trade Something 
    </a><br>
</div>
<script>

//Something goes here

</script>

我想用jquery来改变其中一个link，但是所有的类都是一样的。我唯一可以参考的是id "vdp_buttons"。有没有办法使用 jquery 或 javascript 遍历每个 link 并在这种情况下更改特定的 href，还是不可能？

Answer 1

您需要使用 select 使用 href 属性，见下文。

$("#vdp_buttons [href='/appraisal/1312678/cta_request.php']").attr("href","newlink")

演示：

$("#vdp_buttons [href='/appraisal/1312678/cta_request.php']").attr("href","newlink");

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-7 col-md-12  no_padding" id="vdp_buttons">
    <a href="/quote/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-2">
    Request Something     
    </a><br>
    <a href="/test_drive/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-2">
    Test Something   
    </a><br>
    <a href="/availability/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-3">
    Check Something 
    </a><br>
    <a href="/appraisal/1312678/cta_request.php" class="btn btn-success cta vdp-cta col-xs-12 col-md-5 col-lg-3">
    Trade Something 
    </a><br>
</div>

Answer 2

您可以遍历所有 link 标签并在某些条件成立时更改 href，如下所示。

$("a").each(function() {
    var href = $(this).attr('href');
    if ( href == '/old/link') { 
        $(this).attr('href', 'this/is/new/link')
    }
});

Answer 3

Jquery 遍历所有锚点：

$( document ).ready(function() {        
   $('a').each(function (i, v) {
      alert(this.href); 
   });
});

将其放入您的标签中，您将看到每个 href。通过

更改

this.href = "http://www.google.com"

在包含匹配 classes 的 class 中使用 javascript 更改 href

changing an href using javascript in a class containing matching classes

html

javascript

iteration

jquery

href