How to select $this of a parent function?

1
votes

I have few divs with the class weather-widget and a parameter xml-url. Using Jquery I am looping through all divs with the weather-widget class. Then in the call back function i am making ajax request to pull in xml data. Then in the success function I am looping through content. My question is how can I select the weather-widget and appent its HTML. I have

HTML

<div class="weather-widget" xml-url='www.firstURL.com/output.xml'>
    <div class="panel panel-default">
        <div class="panel-heading">Vancouver</div>
        <ul class="list-group">
            <!-- append using jquery -->
        </ul>
    </div>
</div>
<div class="weather-widget" xml-url='www.secondURL.com/output.xml'>
    <div class="panel panel-default">
        <div class="panel-heading">Abbotsford</div>
        <ul class="list-group">
            <!-- append using jquery -->
        </ul>
    </div>
</div>

Javascript

$(".weather-widget").each(function(){


    $.ajax({
        url: $(this).attr('xml-url'),
        type: "GET",
        dataType: "xml",
        success: function(xml){
            $(xml).find("entry").each(function () {

               $(What Should I PUT HERE).find(ul).append('<li class=\"list-group-item\">'+$(this).find("title").text()+'</li>');

            });
        }
    }); 


});
3
javascriptjqueryhtml
Before the Ajax call ($.ajax) add a reference to it. var $widget = $(this); Then in the success function you can use $widget - manish

3 Answers

3
votes

You already have the element, it's the second argument in the each() loop

$(".weather-widget").each(function(index, elem) {
    $.ajax({
        url: $(this).attr('xml-url'),
        type: "GET",
        dataType: "xml",
        success: function(xml) {
            $(xml).find("entry").each(function() {
                    $(elem).find('ul').append('<li class=\"list-group-item\">' + $(this).find("title").text() + '</li>');
            });
        }
    });
});
0
votes

Well one option is using closures:

$(".weather-widget").each(function(){
   (function(el){
       // ..
       $(xml).find("entry").each(function () {
           $(el).find(ul).append('<li class=\"list-group-item\">'+$(this).find("title").text()+'</li>');
         // ^^^^
       });
       // ..
   })(this);
});
0
votes

Just store away the element inside the function, which is accessible inside your success callback.

$(".weather-widget").each(function(){
    var $thisWidget = $(this);

    $.ajax({
        url: $(this).attr('xml-url'),
        type: "GET",
        dataType: "xml",
        success: function(xml){
            $(xml).find("entry").each(function () {

               $thisWidget.find(ul).append('<li class=\"list-group-item\">'+$(this).find("title").text()+'</li>');

            });
        }
    }); 


});