load div from page.. from the href of class

Question

my page has got a lot of div's with <a href>'s to open modalboxes (colorbox). The pages that these links open got an id="mainColumn". Content need only to be loaded from this id.

<div>                       
<a href="includes/page_1.html" class="pop"></a>
</div>

<div>                       
<a href="includes/page_2.html" class="pop"></a>
</div>

<div>                       
<a href="includes/page_3.html" class="pop"></a>
</div>


 $(".pop").colorbox({
    href: $(".pop").attr('href') + " #mainColumn"
    });

The href's of al of the <a>'s change into the first one...

So includes/page_3.html changes into includes/page_1.html or in other words: All of the modalboxes show the same content...

$(this) gives me content undefined

any help would appreciated, thanks

Answer 1

Inside of the options for colorbox you have referenced $(".pop").attr('href') which get href attribute of the first .pop element. You have to wrap it into calling of each method.

$(".pop").each(function() {
  var el = $(this);
  el.colorbox({
    href: el.attr('href') + " #mainColumn"
  });
});