Greetings The essence of the work. The code makes the clones I need Div 's. I sign them with .html and assign the required values ​​from the array. Appeared the need to place the picture in each clone. Everything seems to be done as it was, the picture is loaded into the block, but not into everything, but only in the last one. The dependence found on the numbers specified in For . Tell me what I'm doing wrong. It is necessary that each div-clone flew its own Jpzhka .

In this form, the picture is determined in the last Div .

var Store = [ ["Name_2", "N_2"], ["Name_3", "N_3"], ["Name_4", "N_4"] ]; var Sum = Store.length+1; var Images = [["1.jpg"],["2.jpg"],["3.jpg"]]; var Cover = Images.length; $(document).ready(function() { window.onload = function () { var oImage = new Image(); oImage.onload = function () { for (var q=0; q<Cover; q++); document.getElementById('Image' + '_' + q).src = oImage.src; }; oImage.src = Images[1]; }; var container = $("#container"), containers = Store.slice(0).map(function(el, index) { var clone = container.clone(); clone.children().html(function(i) { $('div.Pr').html("<b>Pr: </b>" + el[0]); $('div.Dr').html("<b>Dr: </b>" + el[1]); return i[el]; }).andSelf() .attr("id", function(i, attr) { return attr + '_' + (index + 1); }); return clone; }); $(".clone-box").append(containers); }); 
 #container { margin-top: 30px; } .tab { border: 3px double black; background: #; padding: 4px; } 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <link rel="stylesheet" type="text/css" href="Clone.css"> <div id="container" class="tab"> <img id="Image" class="Image" src="" width="30" height="30" align="Right"/> <div id="Pr" class="Pr"><b>Pr: </b>Name</div> <div id="Dr" class="Dr"><b>Dr: </b>N</div> </div> <div class="clone-box"></div>

  • one
    +1 for the word "Jpzhka". Hangs up for a couple of seconds, trying to figure out what it is. - Igor

1 answer 1

Oh, how much of everyone, as I see the problem is exactly here:

 for (var q=0; q<Cover; q++); document.getElementById('Image' + '_' + q).src = oImage.src;

namely, at the semicolon immediately after the handicap. It turns out that the loop is being processed for nothing, without document.getElementById('Image' + '_' + q).src = oImage.src; thus, after exiting the loop, q will be equal to the maximum value itself, and the link assignment will be only once.

I would also like to focus on the array entry:

 var Images = [["1.jpg"],["2.jpg"],["3.jpg"]]; ... oImage.src = Images[1];

In this case, the arrays are in an array, and the value of Images[1] will be an array, not a string.

It is also not clear why to write Store.slice(0).map , of course it is clear that using slice you can create an array clone, but the map function does the same.

  • By removing the comma after for , the cycle was interrupted altogether, not a single image is displayed. In the array, it was planned, but here it is not fundamentally proper, he will move by sending the names of the pictures to the corresponding Imag ID . - Kirill
  • Yes, that's right, I apologize, I did not check the cycle itself for correctness, the fact is that you start counting from 0, the code looks for the Image_0 element, but it simply does not Image_0 , and an error pops up, after the cycle simply stops, you need to either change the cycle, shifting it per unit: for (var q=1; q<Cover + 1; q++) , or start counting the ID from scratch. - WanSpi
  • Thank you It helped the beginning of the account with 1 . Now in each form I get the value specified in oImage.src = Images [1] , but it is the same, because specified only in Images [1] . In order for each form to have the original values ​​of each element of the array, it is necessary to rebuild it in this part oImage.src = Images [1]; where image [will be i] for example? - Kirill
  • Yes, that's right, you can write something like: for (var q = 1; q < Cover + 1; q++) { (function(q){ var oImage = new Image(); oImage.onload = function () { document.getElementById('Image_' + q).src = oImage.src; }; oImage.src = Images[q - 1]; })(q); }; for (var q = 1; q < Cover + 1; q++) { (function(q){ var oImage = new Image(); oImage.onload = function () { document.getElementById('Image_' + q).src = oImage.src; }; oImage.src = Images[q - 1]; })(q); }; - WanSpi
  • Thank you!) I will move in the intended direction) - Kirill