Question

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

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

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()方法使用attribute equals选择器将时间附加到具有相同城市属性的相应<div>，如：

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

Updated fiddle

Answer 2

DEMO

变化：

            $(this).text(city+ ': '+cityTime);

要：

            var timeP = $('p.time','#weather_' + city);
            timeP = timeP.length ? timeP : $('<p/>',{class:'time'}).appendTo( '#weather_' + city );
            timeP.text(cityTime);

使用jQuery重新排列页面元素

2 个答案:

Updated fiddle