Loop in jquery based on razor loop

Question

I have a for each loop in my razor view (MVC4)

 @foreach (var fe in ViewBag.FeatureProducts)
  {

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

  }

in the each loop i have to extract the @html row content and display in to the div 'product-qty-dt'.

For that I write the following 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])
       });

   });

But this was only consider the last foreach raw. how can i call this jquery in each loop call.

For example, In first loop,

  <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>

second loop

 <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>

Thirdloop

 <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>

Wouldn't it be easier just to have a view model with properties for the data you want to display (no javascript at all). In any case, an example of what @Html.Raw(fe.Details) generates would help. — user3559349
– user3559349, Commented Feb 10, 2015 at 6:25
@StephenMuecke Sample of @Html.Raw(fe.Details) contesnt: <p>Lorem, Ispum</p><p>doler emit,fghjh</p><p>9gm</p> — shyama
– shyama, Commented Feb 10, 2015 at 6:30
Please edit the question (too difficult to read in comments especially if you dont format them), and can you indicate what the expected output will be - i.e. to be appended to $('.product-qty-dt') — user3559349
– user3559349, Commented Feb 10, 2015 at 6:33

user3559349 · Accepted Answer · 2015-02-10 07:00:13Z

1

The following will add the text of the last <p> in a <div class="product-details"> element into the corresponding <div class="product-qty-dt"> element

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

answered Feb 10, 2015 at 7:00

user3559349

Sign up to request clarification or add additional context in comments.

Comments

Chris du Preez · Accepted Answer · 2015-02-10 07:18:26Z

1

This should do the trick. Also the data array is still used just incase you would like to access other data portions stored in product-details.

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

answered Feb 10, 2015 at 7:18

Chris du Preez

5543 silver badges8 bronze badges

Collectives™ on Stack Overflow

Loop in jquery based on razor loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related