Question

I have different container that get reloaded on different events. I have plenty of them, so I gave each container the class load.

This is how all of them look like:

<div class="load" data-href="facebook">
</div>

I also have a function, that is triggered by various actions:

function get_timing(time)
{
   $(".load").load("myfolder/mod_"+$(this).attr("data-href")+".php?action="+time, function() { 
       alert('Here I could use this:' + $(this).attr("data-href"));
   }
}

I know that I cannot use this in the example above, I could only use it in the callback. My question is: How can I use attributes of the object to define the path of the load function.

This is how it could work:

function get_timing(time)
{
   $(".load").fadeIn(10, function()
       {
           $(this).load("myfolder/mod_"+$(this).attr("data-href")+".php?action="+time, function() { 
           alert('loaded');
       }
   }
}

Is there a way to do this without the asynchronus function (in this case .fadIn) around)

Hope I could explain my problem – thank you in advance!

Answer 1

If you want to go along with classes you can reference them via an index:

var element = $(".load").get(0);
console.log($(element).attr("data-href"));

Note that you have to re-jQueryfy element via $(element) in order to access attr()

If you want to read out all elements with a given class I recommend $.each()

//$.each($(".load"), function(index, value){
$(".load").each(function(index, value){
    console.log( $(value).attr("data-href"));   
});