Перебор массива вложенного в массив в массиве

334

12 мая 2017, 17:03

Парни, помогите разобраться в следующем. Есть массив

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

Из него создаются блоки для каждого элемента с индексом 0 по клику.

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

А вот дальше я застрял на таком изврате:
хочу,чтобы по клику на любой блок (например с названием b) - данный список очищался, а создавался следующий, с блоками для b из его массива.

Типа on.click-"b"->append.все блоки, которые есть для b. Или более графически нужно вот это:

|a| |b| |c| => при клике на кнопку a или b, или c (в данном вопросе 'b') => |b1| |b2| |b3|.

Дюже хочется узнать, как такое реализовать можно???
Просто зациклился уже по кругу ходить, в голове одна каша. Нужно свежее мнение со стороны. Поможете? up =)

Answer 1

В качестве одного из вариантов, при создании начального списка можно сразу навешивать обработчики на создаваемые элементы, в этом случае доступны сразу их индексы, и поиск делать не нужно.

Например:

$(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);              
    });
});