使用 jQuery 禁用或更改锚标记的 href答案

【问题标题】：disable or change href for an anchor tag using jQuery使用 jQuery 禁用或更改锚标记的 href
【发布时间】：2016-06-17 02:05:13
【问题描述】：

我有类似这样的 HTML：

<div id="StoreLocatorPlaceHoler_ctl07_ctl00_ctl00_pager_ctl00_ctl00_numeric" class="sf_pagerNumeric">
    <a href="http://www.domain.com/store-list">1</a>
    <a href="http://www.domain.com/store-list/page/2">2</a>
    <a href="http://www.domain.com/store-list/page/3">3</a>
    <a href="http://www.domain.com/store-list/page/4">4</a>
    <a href="http://www.domain.com/store-list/page/5">5</a>
    <a href="http://www.domain.com/store-list/page/6">6</a>
    <a href="http://www.domain.com/store-list/page/7">7</a>
    <a href="http://www.domain.com/store-list/page/8">8</a>
    <a href="http://www.domain.com/store-list/page/9">9</a>
    <a href="http://www.domain.com/store-list/page/10">10</a>
</div>

我无法控制 HTML，我无法修改它，它是由 CMS 中的内置控件自动生成的。

我想要使用 jQuery 做的是能够获取每个锚标签上的 href 并对其进行修改，这些标签没有 ID 或与之关联的类，我如何在 jQuery 中访问这些锚标签？这就是我迄今为止尝试做的事情

jQuery(document).ready(function ($) {

    $(".sf_pagerNumeric a").click(function () {
        alert("clicked");

        window.location = "http://www.google.com";
    });
});

但是单击锚标记似乎不会触发此代码，它只是使用默认的 href 和重定向。任何帮助将不胜感激。

编辑：我并不特别想在单击时更改它，我可以在文档加载时一次完成所有操作，我需要一种访问这些锚点的方法。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这是在加载文档时更改 div 中每个锚点的 href 的方法。

$(function(){
    $('.sf_pagerNumeric a').each(function(){
        $(this).attr('href', '#changed');
    });
});

FIDDLE

【讨论】：

【解决方案2】：

这样就可以了

$(".sf_pagerNumeric a").click(function () {
    $(this).attr('href','http://www.google.com');
});

【讨论】：

【解决方案3】：

更改点击事件的 URL 使用：

 $(".sf_pagerNumeric a").click(function (e) {
    var e=e||window.event;
    var href=$(this).attr('href');
   /* If you want to change it */
   $(this).attr('href',"NEW URL");
   //ELSE
    e.stopPropagation();
    e.preventDefault();
    window.location.href="NEW URL HERE!";
});

或要在加载文档时更改它，请使用：

$(document).ready(function(){
    $(".sf_pagerNumeric a").each(function(){
        $(this).attr("href","NEW URL");
    });
});

希望它会帮助你干杯！

【讨论】：

【解决方案4】：

也许您的 html 稍后会加载 ajax。试试：

jQuery(document).ready(function ($) { $(".sf_pagerNumeric a").live('click',function () { alert("clicked"); window.location = "http://www.google.com"; }); });

【讨论】：

请注意，.live() 仅适用于某些版本的 jQuery，并且在 1.7 版本中已替换为 .on()。

【解决方案5】：

您需要使用$(this) 和attr('href') 来获取当前href。试试这个：

$(".sf_pagerNumeric a").click(function () {
    alert($(this).attr('href'));
    window.location = $(this).attr('href');
   //to set attr of href, $(this).attr('href','newHREF');
});

【讨论】：

【解决方案6】：

首先，您只需执行以下操作即可访问它们

选择器

$(".sf_pagerNumeric a")

这将返回一个 jQuery 对象，该对象包含所有与您提供的元素匹配的数组，您可以将它们作为数组处理。

JQuery 对象

{   
  0: a
  1: a
  2: a
  3: a
  4: a
  5: a
  6: a
  7: a
  8: a
  9: a
  context: document
  length: 10
  prevObject: jQuery.fn.init[1]
  selector: ".sf_pagerNumeric a"
  __proto__: Object[0]
}

为了防止 href 达到原来的目的，您必须阻止它成为默认操作，您也可以返回 false，但这也会阻止任何其他侦听器与该元素挂钩。

Delegate 实际上是在任何与选择器匹配的元素上挂钩该行为，即使该元素稍后添加到 DOM 中也是如此。

委托

$( ".sf_pagerNumeric" ).delegate( "a", "click", function() {
  alert("clicked");
  event.preventDefault(); //this one to preventx click to bubble and do it's original purpose
  window.location = "http://www.google.com";
});

这意味着如果您知道内容是什么，您也可以这样做

按内容

$( ".sf_pagerNumeric" ).delegate( "a", "click", function() {
  event.preventDefault(); 
  var elementText = $(this).text(); 
  if (elementText === '3'){
    alert('hell yeah I\'m a '+elementText);
  }
  window.location = "http://www.google.com";
});

或者如果你知道一个属性值你也可以这样做

按属性

$( ".sf_pagerNumeric" ).delegate( "a", "click", function() {
  event.preventDefault(); 
  var address = 'http://www.domain.com/store-list/page/'
  var elementHref = $(this).attr('href'); 
  if (elementHref === address+'7'){
    alert('hell yeah I used to go to  '+elementHref);
  }
  window.location = "http://www.google.com";
});

改变 DOM 现在，如果你想改变 DOM，你可以

var elements = $( ".sf_pagerNumeric a" );

$.each(elements, function (index, element){
  $(element).attr('href' , index);
});

或者

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

虽然更改 href 行为是一种 hack，但我不会使用 javascript 更改它，而是会在 CMS 中正确更改它。我希望我能帮上忙。

Demo HERE

干杯

【讨论】：

【解决方案7】：

这是一个简单的示例，每个循环都可以解决问题。

i = 0;
$.each($("a:contains('Owners')"), function(i) {
  i++;

  if(i == 2){
    $(this).hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="">Owners Login</a> <br/>
<a href="">Owners Setup</a> <br/>
<a href="">Owners Register</a> <br/>
<a href="">Owners Billing</a>

【讨论】：