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

更改点击事件的网址使用：

 $(".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');
    });
});

FIDDLE

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但这也会阻止任何其他侦听器挂在该元素上。

委托实际上是在与选择器匹配的任何元素上挂钩该行为，即使该元素稍后在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中正确地改变它。我希望我能帮忙。

<强> Demo HERE

干杯

Answer 7

这是一个简单的例子，每个循环都可以做到。

＆＃13;

i = 0;
$.each($("a:contains('Owners')"), function(i) {
  i++;

  if(i == 2){
    $(this).hide()
  }
});

＆＃13;

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

＆＃13;

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

7 个答案: