Help guys find out the following. There is an array

var myArr1 = [ ['a', ['a1','a2','a3'] ], ['b',['b1','b2','b2'] ], ['c', ['c1','c2','c3'] ] ].

Blocks are created from it for each element with index 0 on a click.

 $(document).on('click','.goods',function(){ myArr1.forEach(function(item){ $('#lists').append('<div class="loot">'+item[0]+'</div>'); }); });

But then I got stuck on this perversion:
I want to click on any block (for example with the name b) - this list is cleared, and the next one is created, with blocks for b from its array.

Type on.click- "b" -> append.all blocks that are for b. Or more graphically you need this:

| a | | b | | c | => when you click on the button a or b, or c (in this question 'b') => | b1 | | b2 | | b3 |.

Dyuzhe want to know how this can be implemented ???
I just went in cycles in a circle, one porridge in my head. Need a fresh opinion from the side. Will you help? up =)

  • empty method deletes all nested elements - Grundy
  • no, I can delete via $ ('# lists'). html (''); and here is how to make the creation of blocks for all elements for the selected block - trouble is worse, the second day without sleep leaving = ((( - Olejjon
  • And you don’t need anything else, after deleting, you simply add new elements by analogy with the way they are added now - Grundy
  • Nah, I can't refer to these arrays. I'm confused how to register the indexes for the pressed button, and then in the array to find an array of values ​​for this button = / - Olejjon
  • And the trouble is that I thought to make the keys, but there are over 800 values ​​and 5-50 keys each. - Olejjon

1 answer 1

As one of the options, when creating the initial list, you can immediately hang handlers on the created elements, in this case their indexes are immediately available, and the search is not necessary.

For example:

 $(document).on('click','.goods',function(){ var list = $('#lists').empty(); // по клику очищаем элемент, чтобы не добавлялось одно и то же несколько раз myArr1.forEach(function(item,index){ var element = $('<div class="loot">'+item[0]+'</div>'); element.click(function(){ var nestedElements = myArr1[index][1]; // получаем массив для вывода $('#lists').empty() // очищаем элемент .append( // добавляем новые элементы nestedElements.map(function(nestedItem){ return $('<div class="loot">'+nestedItem+'</div>'); }) ); }); list.append(element); }); });
  • Ogogo ... Cool! Thank. - Olejjon
  • Now I ’ll understand what’s where, why and why - Olejjon
  • I have a question, is it possible for a key in an object to specify an array with values ​​as a value? And if so, how can these values ​​be iterated? - Olejjon
  • @Olejjon, I did not understand the question - Grundy
  • Well, is it possible to do this var obj1 = {"name": ["thurname 1", "thurname 2", "thurname 3"]} and how then to pull them out, by what method or loop? - Olejjon