disable or change href for an anchor tag using jQuery

Question

I have HTML something like this:

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

I have no control over the HTML, I cannot modify it, it is autogenerated by a built in control within CMS.

What I want to do using jQuery is to be able to get the href on each of these anchor tags and modify it, these tags do not have IDs or class associated with them, how do I access those anchor tags in jQuery? This is what I have tried to do so far

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

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

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

But the click on the anchor tag doesnt seem to fire this code, it just uses the default href and redirects. Any help would be appreciated.

EDIT: I am not particular about changing it when clicked, I can do it all at once when the document loads, I need a way to access those anchors.

Answer 1

To Change URL on click event Use:

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

or To change it when Document Loads, Use:

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

Hope It'll Help You Cheers!

Answer 2

This would work

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

Answer 3

Here is how you change the href for every anchor in your div on load of the document.

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

FIDDLE

Answer 4

You need to use $(this) along with attr('href') to get current href. Try this:

$(".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

Maybe your html loaded with ajax later. Try:

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

Answer 6

To begin with you have access to them by simply doing

Selector

$(".sf_pagerNumeric a")

that will return a jQuery object that contains arraylike all your matching to the selctor you provided elements, and you can handle them as an array.

JQuery object

{   
  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]
}

To prevent the href from doing it's original purpose you must prevent it's default action, you can also return false but this will prevent any other listeners hooked on that element as well.

Delegate is actually hooks that behaviour on any element that matches the selector even if that element is added later in DOM.

Delegate

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

That means that you can also do that if you know what the content is

by content

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

or if you know an attribute value you can also do

by attribute

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

Altering the DOM Now if you want to alter the DOM you can

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

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

Or

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

changing the href behaviour is kind of a hack though, I wouldn't alter that with javascript instead I would change that properly in the CMS. I hope I helped.

Demo HERE

Cheers

Answer 7

This is a quick example, an each loop can do the trick.

 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>