Question

我有类天气小部件和参数xml-url的几个div。使用Jquery我使用weather-widget类循环遍历所有div。然后在回调函数中，我正在进行ajax请求以提取xml数据。然后在成功函数中我循环遍历内容。我的问题是如何选择天气小部件并附加其HTML。我有

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>');

            });
        }
    }); 


});

Answer 1

你已经有了元素，它是$(".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>'); }); } }); });循环

中的第二个参数


@Component({
   ...
   templateUrl: './home.component'
}

Answer 2

一个选项是使用闭包：

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

Answer 3

只需将元素存储在函数内部，该元素可在成功回调中访问。

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

            });
        }
    }); 


});

如何选择$ this的父函数？

3 个答案: