javascript - 使用 jQuery 重新排列页面元素

Question

我对 jQuery 和 JavaScript 比较陌生，我想我明白是什么导致了我的问题，但我不确定如何解决它。

我正在使用 SimpleWeather.JS、moment.js 和 moment.js 时区获取 4 个城市的当前时间和天气。我在页面上有我想要的所有数据，但我想将每个城市的时间移动为每个城市的 div 中的第二段。关于如何使它与我当前的代码一起工作的任何想法，或者是否有更有效的方法来产生这个结果？

http://jsfiddle.net/ljd144/p6tpvz1r/

这是我的 JS:

$(document).ready(function () {
    $('.weather').each(function () {
        var city = $(this).attr("city");
        var woeid = $(this).attr("woeid");
        var degrees = $(this).attr("degrees");
        var continent = $(this).attr("continent");

        $.simpleWeather({
            zipcode: '',
            woeid: woeid,
            location: '',
            unit: degrees,
            success: function (weather) {

                if (continent == 'America'){
                    html = '<p>' + weather.city + ', ' + weather.region + '</p>';
                }
                else {
                    html = '<p>' + weather.city + ', ' + weather.country + '</p>';
                }
                //html += '<p class="time" id="'+city+'></p>';
                //html += '<p>' + weather.updated + '</p>';
                html += '<p><i class="icon-' + weather.code + '"></i> ' + weather.temp + '&deg;' + weather.units.temp + '<p>';
                html += '<p>' + weather.currently + '<p>';


                $('#weather_' + city).html(html);
            },
            error: function (error) {
                $('#weather_' + city).html('<p>' + error + '</p>');
            }
        });
    });


     $(function () {
        setInterval(function () {
            $('.time').each(function () {
                var city = $(this).attr("city");
                var continent = $(this).attr("continent");
                //$(this).text(city);
                var utc = moment.utc().format('YYYY-MM-DD HH:mm:ss');
                var localTime = moment.utc(utc).toDate();
                cityTime = moment(localTime).tz(continent + "/" + city).format('ddd MMM D YYYY, h:mm:ss a z');
                $(this).text(city+ ': '+cityTime);
            });
        }, 1000);


    });

         $('.time').each(function () {
             var city = $(this).attr("city");
             //$('#weather_' + city).after(this);

         });  



});

Answer 1

您可以使用 appendTo() 将时间附加到相应 <div> 的方法使用 attribute equals 具有相同的城市属性选择器如:

 $(this).text(city + ': ' + cityTime).appendTo("div[city='"+city+"']");

Updated fiddle