基于剃刀循环的jquery循环答案

【问题标题】：Loop in jquery based on razor loop基于剃刀循环的jquery循环
【发布时间】：2015-02-10 15:18:26
【问题描述】：

我的 razor 视图 (MVC4) 中有一个 for each 循环

 @foreach (var fe in ViewBag.FeatureProducts)
  {

    <div class="product-details" style="display:none;">@Html.Raw(fe.Details)</div>
    <div class="product-qty-dt">   </div>

  }

在每个循环中，我必须提取@html 行内容并显示到 div 'product-qty-dt'。

为此，我编写了以下 jquery，

$(document).ready(function () {        
       var data = $('.product-details p').map(function () {
           return $(this).text();
       }).get();           
       //product availability
       var availability = data[2].split(",");        
       $.each(availability, function (i) {
           $('.product-qty-dt').append( availability[i])
       });

   });

但这只是考虑最后一个 foreach 原始的。我如何在每个循环调用中调用这个 jquery。

例如，在第一个循环中，

  <div class="product-details" style="display:none;"><p>Lorem, Ispum</p><p>doler emit,fghjh</p><p>9gm</p></div>
  <div class="product-qty-dt"> 9gm  </div>

第二个循环

 <div class="product-details" style="display:none;"><p>Lorem, Ispum</p><p>doler emit,fghjh</p><p>5gm</p></div>
 <div class="product-qty-dt"> 5gm  </div>

三环

 <div class="product-details" style="display:none;"><p>Lorem, Ispum</p><p>doler emit,fghjh</p><p>3gm</p></div>
 <div class="product-qty-dt"> 3gm  </div>

【问题讨论】：

拥有一个视图模型，其中包含您要显示的数据的属性（根本没有 javascript）会不会更容易。在任何情况下，@Html.Raw(fe.Details) 生成的示例都会有所帮助。
@StephenMuecke @Html.Raw(fe.Details) 样本示例：
Lorem, Ispum

doler emit,fghjh

9gm
请编辑问题（在 cmets 中很难阅读，尤其是如果您不格式化它们），您能否指出预期的输出将是什么 - 即附加到 $('.product-qty-dt')
@StephenMuecke：编辑了我的问题..请帮助我

标签： javascript jquery asp.net-mvc asp.net-mvc-4 razor

【解决方案1】：

下面会将<div class="product-details">元素中最后一个<p>的文本添加到对应的<div class="product-qty-dt">元素中

$('.product-details').each(function () {
  var t = $(this).children('p').last().text();
  $(this).next('.product-qty-dt').text(t);
})

【讨论】：

【解决方案2】：

这应该可以解决问题。此外，data 数组仍然被使用，以防您想访问存储在产品详细信息中的其他数据部分。

$(".product-details").each(function()
    {
        var data = $(this).find('p').map(function () { return $(this).text() }).get();
        $(this).next('.product-qty-dt').text(data[2]);
    })

【讨论】：