CODEWITHSUNDEEP
javascriptjquery
SanJeet Singh
SanJeet Singh

Reputation: 1331

Unable to add attributes to links in jQuery?

This is the format of various links on my webpage. Links can be any of these types:

<a data-id="1444709976-ohgusB" data-toggle="modal" class="modal-link store-link" 
   href="http://firstwebsite.com/some-text.html" 
   data-target="#myModal">
   BOLDR Voyage watch may just be the “clever” device you want and need</a>

<a data-id="1443322807-iLmF2d" class="store-link" 
   href="http://secondwebsite.com/other-text.html" target="_blank">
   Gmail for Android: 7 cool tips and tricks you must try<span class="fa fa-external-link"></span></a>

I tried using following jQuery to change attributes of all links that have only .store-link class. This is my code:

if($('a.store-link').hasClass('modal-link')==false){
  $(this).removeAttr('target');
  $(this).addClass('modal-link');
  $(this).attr('data-toggle','modal');
  $(this).attr('data-target','#myModal');
}

However, there is no change in attributes of any link. I don't get any error either.

Upvotes: 1

Views: 74

Answers (2)

frogatto
frogatto

Reputation: 29285

As an explanation for @Diptox's answer, I added this answer.

In a function space if you don't set this object, it would point to the global object (i.e. window object) unless you call a function and set it's this object or call a function in a literal object.

In the example below, multiple usage of this has been written. 

var foo = /* some object */;

function bar (){
    console.log(this);
}

var obj = {
    someMethod: function(){
        console.log(this);
    }
}

console.log(this); // this = Global Object i.e. window
bar();             // this = Global Object i.e. window
bar.call(foo);     // this = foo
obj.someMethod();  // this = obj

In your case:

if($('a.store-link').hasClass('modal-link')==false){
    $(this).removeAttr('target');
    $(this).addClass('modal-link');
    $(this).attr('data-toggle','modal');
    $(this).attr('data-target','#myModal');
}

Actually this points to the global object (i.e. window). While in @Diptox's answer:

$('a.store-link').each(function()
{

   /* In this function space, 'this' is set by jQuery,          */
   /* which points to the current object of type 'a.store-link' */

   if($(this).hasClass('modal-link') == false)
   {
       $(this).removeAttr('target');
       $(this).addClass('modal-link');
       $(this).attr('data-toggle','modal');
       $(this).attr('data-target','#myModal');
   }
});

Upvotes: 2

Diptox
Diptox

Reputation: 1809

when you use each it will loop on all a.store-link and it will work , on your code you have some mistakes like the $(this) , that i think you think it refers to $("a.store-link") but it's not

$('a.store-link').each(function()
{
   if($(this).hasClass('modal-link') == false)
   {
      $(this).removeAttr('target');
      $(this).addClass('modal-link');
      $(this).attr('data-toggle','modal');
      $(this).attr('data-target','#myModal');
   }
});

Upvotes: 3

Related Questions