Как правильно искать элементы в DOM и записывать результаты в массив?
 

Есть страница с изображениями, каждое из которых можно открыть в модальном окне bootstrap, Данные для заполнения окна беру через html. Кликаю по картинке, забираю ссылку на изображение, описание и вывожу в модальном.
Так же в модальном хочу вывести слайдер с похожими изображениями, сортировать их по значению data-value например. Вот что получилось:

$('.mwrap').on('click', function() { //кликаем на блок с картинкой
            var img = $('img', this).attr('src'); //забираем данные
            var desc = $('p', this).html();
            var value = $('img', this).attr('data-value');
            var arr = $('img[data-value="'+value+'"]').map(function() { return this.src; }).get(); //здесь со всей страницы формируем массив с ссылками на похожие изображения отсортированные по data-value
            var elements = $();
            for(x = 0; x < arr.length; x++) { 
            elements = elements.add('<div><img src="'+arr[x]+'"></div>'); //создаем html для слайдера
            }
            $('#myModal').on('show.bs.modal', function() { //вызываем модалку
                $(".wimg").attr("src", img); //добавляем данные в html модального окна
                $(".wdesc").html(desc);
                $('.wslider').append(elements);  //добавляем html для слайдера
            });
        });

Данный код работает только для первого вызова модального окна, если не перезагружая страницу вызывать следующие окна, то массив arr дублируется и слайдер рушится. Как правильно сделать выборку src нужных изображений и выводить в модальном окне в качестве слайдера? Спасибо.

MouseOver,
лучше бы макет полностью, а так var для х, и что значит дублируется может $('.wslider').append(elements); заменить на html?

http://bogdan.tw1.ru/works вот ссыль
Посмотрите, вывожу массив в консоль.

MouseOver,
возможный вариант ...

jQuery(function() {
    var img, desc, elements;
    jQuery(".mwrap").on("click", function() {
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");
        jQuery(".wslider").html("");
        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
    });
    jQuery("#myModal").on("show.bs.modal", function() {
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
    })
});

MouseOver,
немного поправил смотрите снова.

up

рони,
Поставил код на страницу, вроде ок все, только слайдер запускается только один раз, далее просто изображения выводятся. Подскажите как запускать его для каждого окна? Спасибо

MouseOver,
читать доку на slick про slickAdd и slickRemove и циклом вместо map
пока грубо разрушение при закрытии модального окна

jQuery(".mwrap").on("click", function() {
         var img, desc, elements;
        img = jQuery("img", this).attr("src");
        desc = jQuery("p", this).html();
        var value = jQuery("img", this).data("value");

        elements = jQuery.map(jQuery('img[data-value="' + value + '"]'), function(img) {
            return jQuery("<div/>" , {html : $(img).clone()})
        })
        jQuery(".wimg").attr("src", img);
        jQuery(".wdesc").html(desc);
        jQuery(".wslider").html(elements)
        $(".wslider").slick({
                  dots: true,
                  slidesToShow: 3,
                  slidesToScroll: 1,
                  autoplay: true
              });



    });
    jQuery("#myModal").on("hide.bs.modal", function() {
        jQuery(".wslider").slick('destroy').html("");
    })

рони,
Большущее спасибо :thanks: , жалко не могу плюсануть http://prntscr.com/cynjad
Вы кстати каким слайдером пользуетесь?)

MouseOver, любым
проще написать свой :)
http://javascript.ru/forum/dom-windo...tml#post430374