Parse an array of div clones

Question

Greetings to all! There was a question, so I decided to get an opinion. I have this code, everything works as I need, but I just can’t figure out how to make each div div have 1 array from the global array. That is, in container_1 - Store [0] [j], in container_2 - Store [0] [j]. The value of j will be constant in each block from 0 to 5. I rummaged through a bunch of documentation, but I can’t find any pickups. Tell me if it is possible to do it at all and possible method, function. Bulkheads work fine, but all information sent to the form is also cloned (Thank you in advance!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> var Store = [["1","2","3","4","5","6"],["11","12","13","14","15","16"],["17","18","19","20","21","22"]]; var Sum = Store.length; </script> <script> $(document).ready(function() { var cl = 1; for(var pr = 1; pr < Sum; pr++) { var clone = $("#container").clone(false) var cloneItems = clone.find("*[id]").andSelf(); cloneItems.each(function() { $(this).attr("id", $(this).attr("id") + "_" + cl); }); clone.appendTo( ".clone-box" ); cl++; }}); </script> <div id="container"> <div id="G">1</div> <div id="A">2</div> <div id="S">3</div> <div id="Y">4</div> <div id="F">5</div> <div id="P">6</div><br> </div> <div class="clone-box"></div>

Ie <div id = "container_1">, <div id = "container_2">, etc., depending on the number of arrays.
I understand that you want the div blocks with id="container" , id="container_1" and container_2 be 1-6, 11-16 and 17-22, respectively?
And it turns out that if the value comes from an array (no matter which one), then it is copied across all clones

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-04-15T13:44:07

The only thing left for you to do is fill in the text of divs from the elements of the corresponding arrays, for example, using the html or text method. To select the desired item, you can use the index parameter from the function each

 var Store = [ ["1", "2", "3", "4", "5", "6"], ["11", "12", "13", "14", "15", "16"], ["17", "18", "19", "20", "21", "22"] ]; $(document).ready(function() { var container = $("#container"), containers = Store.slice(1).map(function(el, index) { var clone = container.clone(); //клонируем элемент clone.children() // берем всех детей .text(function(i) { // устанавливаем нужный текст return el[i]; }).andSelf() // добавляем в набор контейнер .attr("id", function(i, attr) { // устанавливаем нужный id return attr + '_' + (index + 1); }); return clone; // возвращаем элемент }); $(".clone-box").append(containers); //добавляем все созданное в общий контейнер });

 #container { margin-top: 50px; } .c { border: 1px red solid; display: flex; margin-bottom: 3px; } .c div { border: 1px green solid; flex-grow: 1; text-align: center; }

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <div id="container" class="c"> <div id="G">1</div> <div id="A">2</div> <div id="S">3</div> <div id="Y">4</div> <div id="F">5</div> <div id="P">6</div> <br> </div> <div class="clone-box"></div>

and how do you memorize the functions and the order of their arguments?
For example, js map (callback (element, index)) and jquery map (callback (index, element)), that is, vice versa.
I work while in sublime, auto-complete for js and jqury, but it doesn’t seem to highlight whose map method.
@ Jean-Claude, two cases are not so difficult to remember: for an array and for a jQuery object :) Well, the order is written in help :) I don’t remember all the functions
I planned for the standard values in DIV to be copied as well, constantly.
In another clone, only the value from the new array changes) And now it turns out that the constant goes out only 1 time, and then the div is completely filled with an array.

Parse an array of div clones

1 answer 1

More articles: