文章/答案/技术大牛

发布

社区首页 >问答首页 >在for循环中创建的html id索引内的jQuery/JS迭代

问在for循环中创建的html id索引内的jQuery/JS迭代
EN

Stack Overflow用户

提问于 2021-04-06 04:11:29

回答 1查看 26关注 0票数 0

我有一个这样的网站

我使用for循环创建这些字段。

@for (int i = 0; i < 5; i++)
{
<a class="btn btn-primary btn-block" onclick="toggle_visibility('dataHolder-@i');">
    <span id="day"> waiting...</span>
</a>

<div id="dataHolder-@i" style="display: none;" class="alert alert-dismissible alert-primary col-lg-12">
    <div class="row">
        <div class="col">
            <b> City: </b> <span id="name.@i"> waiting...</span><br/>
            <b> Country: </b><span id="country.@i"> waiting...</span><br/>
            <b> Latitude: </b><span id="lat.@i"> waiting...</span><br/>
            <b> Longitude: </b><span id="lon.@i"> waiting...</span><br/>
            <b> Visibility: </b><span id="visibility.@i"> waiting...</span>m<br/>
            <b> Wind speed: </b><span id="wind.@i"> waiting...</span>meters/sec<br/>
        </div>
        <div class="col">
            <b> Humidity: </b><span id="humidity.@i"> waiting...</span>%<br/>
            <b> AvgPressure: </b><span id="pressure.@i"> waiting...</span>hPa<br/>
            <b> Temperature: </b><span id="temp.@i"> waiting...</span>&deg; C<br/>
            <b> Temperature feels like: </b><span id="tempfeelslike.@i"> waiting...</span>&deg; C<br/>
            <b> Min temperature: </b><span id="minTemp.@i"> waiting...</span>&deg; C<br/>
            <b> Max temperature:: </b><span id="maxTemp.@i"> waiting...</span>&deg; C<br/>
        </div>
    </div>
</div>}

在那里，我想显示我从后端发送的JSON的值。

我正在使用这样的函数，但我不知道如何将每个值添加到下一个容器中。

success: function(response) {
                var value = JSON.parse(response);
                console.log(response);
                for (var i = 0; i < 5; i++) {
                    $("#name.0").html(value.CityName);
                    $("#country").html(value.CountryName);
                    $("#lat").html(value.Coords[0].lat);
                    $("#lon").html(value.Coords[0].lon);
                    $("#humidity").html(value.DataByDay[0].AvgHumidity);
                    $("#tempfeelslike").html(value.DataByDay[0].AvgFeelsLike);
                    $("#visibility").html(value.DataByDay[0].AvgVisibility);
                    $("#wind").html(value.DataByDay[0].AvgWindSpeed);
                    $("#temp").html(value.DataByDay[0].AvgTemp);
                    $("#maxTemp").html(value.DataByDay[0].AvgMaxTemp);
                    $("#minTemp").html(value.DataByDay[0].AvgMinTemp);
                    $("#pressure").html(value.DataByDay[0].AvgPressure);
                    $("#day").html(value.DataByDay[0].DayTime);
                }
            }

编辑：

我得到的值是这样的

javascript

jquery

asp.net-mvc

回答 1

Stack Overflow用户

发布于 2021-04-06 04:37:50

使用类而不是尝试使用增量ID是最简单的方法。循环遍历每个容器，并使用当前循环迭代的索引将容器索引与数组索引进行匹配

简化示例：

const data = [
  {"lat": 22, "lng": 33},
  {"lat": 27, "lng": 37},
  {"lat": 117, "lng": 77}
]

$('.data-holder').each(function(i){
   const dataItem = data[i];
   $(this).find('.lat').text(dataItem.lat);
   $(this).find('.lng').text(dataItem.lng)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="data-holder">
   <p>Lat: <span class="lat"></span>, Long: <span class="lng"></span>
</div>
<div class="data-holder">
   <p>Lat: <span class="lat"></span>, Long: <span class="lng"></span>
</div>
<div class="data-holder">
   <p>Lat: <span class="lat"></span>, Long: <span class="lng"></span>
</div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66959192

复制

相似问题

问在for循环中创建的html id索引内的jQuery/JS迭代
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在for循环中创建的html id索引内的jQuery/JS迭代EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在for循环中创建的html id索引内的jQuery/JS迭代
EN