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

Question

我有这样的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和重定向。 任何帮助，将不胜感激。

编辑：我不是特别关注点击时更改它，我可以在文档加载时立即完成所有操作，我需要一种方法来访问这些锚点。

Answer 1

在点击事件上更改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");
    });
});

希望它能帮助你干杯！

Answer 2

这会奏效

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

Answer 3

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

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

小提琴

Answer 4

你需要使用$(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');
});

Answer 5

也许你的html后来加载了ajax。 尝试：

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

Answer 6

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

选择

$(".sf_pagerNumeric a")

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

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行为虽然是一种黑客行为，我不会用javascript改变它，而是我会在CMS中正确地改变它。 我希望我帮忙。

在这里演示

干杯

Answer 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>