Question

I have a two-dimensional array which I get back as JSON from a call.

and I also have a 3-by-3 div.

as follows:

<div id="type0">
    <div id="image00"></div>
    <div id="image01"></div>
    <div id="image02"></div>
</div><br />

<div id="type1">
    <div id="image10"></div>
    <div id="image11"></div>
    <div id="image12"></div>
</div><br />

<div id="type2">
    <div id="image20"></div>
    <div id="image21"></div>
    <div id="image22"></div>
</div><br />

and i have the loop below to iterate the data.

$.each(res, function (i, tickets) {
     $.each(tickets, function (j, ticket) {

         console.log('i:' + i);
         console.log('j:' + j); 



     });
 });

How can I replace the content of the div above every time this script is invoked?

Essentially, I want to fill up the 3-by-3 div.

So, with the inner loop, I guess I need something like:

$("#type1").$("#image1").html(image here);

What’s the correct way to do this?

i and j gives u, 0,1,2 and 0,1,2.

or is there a better way to do this?

Answer 1

you can try eq() and start with attribute selector:

$.each(res, function (i, tickets) {
     $.each(tickets, function (j, ticket) {
         $('div[id^=img]').eq(j).text(ticket)
     });
 });

---

$.each(res, function (i, tickets) {
     var ind = i;
     $.each(tickets, function (j, ticket) {
         $('#image'+ind+j).text(ticket)
     });
 });