Проблема с извлечением данных атрибутов из изображения - JQuery

Question

Я пытаюсь извлечь атрибут из изображений, которые я получил из набора галерей изображений на основе ul, используя clone.

Это Tag Ul я хотел клонировать -

<ul class="bannerscollection_zoominout_list"> 
        <li data-text-id="#bannerscollection_zoominout_photoText1" data-bottom-thumb="images/home_bg/infrastructure_s.jpg" data-horizontalPosition="center" data-verticalPosition="center"> 
        <img src="images/home_bg/infrastructure.jpg" width="2500" height="1570" alt="Text"/></li> 
        <li data-text-id="#bannerscollection_zoominout_photoText2" data-horizontalPosition="center" data-verticalPosition="center" data-bottom-thumb="images/home_bg/library_s.jpg" > 
        <img src="images/home_bg/library.jpg" width="2500" height="1570" alt="Text"/></li> 
        <li data-text-id="#bannerscollection_zoominout_photoText3" data-bottom-thumb="images/home_bg/bus_facilities_s.jpg" data-horizontalPosition="center" data-verticalPosition="center" > 
        <img src="images/home_bg/bus_facilities.jpg" width="2500" height="1570" alt="Text"/></li> 
        <li data-text-id="#bannerscollection_zoominout_photoText4" data-bottom-thumb="images/home_bg/canteen_s.jpg" data-horizontalPosition="center" data-verticalPosition="center" > 
        <img src="images/home_bg/canteen.jpg" width="2500" height="1570" alt="Text" /></li> 
        <li data-text-id="#bannerscollection_zoominout_photoText5" data-bottom-thumb="images/home_bg/sports_s.jpg" data-horizontalPosition="center" data-verticalPosition="center" > 
        <img src="images/home_bg/sports.jpg" width="2500" height="1570" alt="Text"/></li> 
     </ul> 

Это JQuery я зашил

$('.bannerscollection_zoominout_list li').each(function(){ 

$(this).clone().appendTo('.mobile ul'); 
$(".mobile ul li").each(function() { 
    // first copy the attributes to remove 
    // if we don't do this it causes problems 
    // iterating over the array we're removing 
    // elements from 
    var attributes = $.map(this.attributes, function(item) { 
    return item.name; 
    }); 

    // now use jQuery to remove the attributes 
    var liat = $(this); 
    $.each(attributes, function(i, item) { 
    liat.removeAttr(item); 
    }); 
}); 
}); 
}); 

Я был успешным в получении Ли и изображения (из галереи уль по желанию)

Это HTML из положить Штамп

<div class="mobile"> 
<ul> 
<li> 
        <img width="2500" height="1570" alt="Text" src="images/home_bg/infrastructure.jpg"></li><li> 
        <img width="2500" height="1570" alt="Text" src="images/home_bg/library.jpg"></li><li> 
        <img width="2500" height="1570" alt="Text" src="images/home_bg/bus_facilities.jpg"></li><li> 
        <img width="2500" height="1570" alt="Text" src="images/home_bg/canteen.jpg"></li><li> 
        <img width="2500" height="1570" alt="Text" src="images/home_bg/sports.jpg"></li></ul> 
</div> 

, но я хочу добавить дополнительный тег h1 к клонированной ul. Мне нужно будет получить «текст атрибута alt» для моего добавленного тега h1. У меня не было успеха в этом.

Мое окончательное намерение состоит в том, чтобы отобразить одни и те же изображения в баннере, который не вписывается в закладках и мобильные телефоны (читай: я с помощью JQuery-зум-в-ZoomOut слайдер изображений)

любая помощь будет ценится ...

Answer 1

Вот конечный набор коды для выше Jquery код

$('.bannerscollection_zoominout_list li').each(function(){ 

$(this).clone().appendTo('.mobile ul'); 
$(".mobile ul li").each(function() { 
    // first copy the attributes to remove 
    // if we don't do this it causes problems 
    // iterating over the array we're removing 
    // elements from 
    var attributes = $.map(this.attributes, function(item) { 
    return item.name; 
    }); 

    // now use jQuery to remove the attributes 
    var liat = $(this); 
    $.each(attributes, function(i, item) { 
    liat.removeAttr(item); 
    }); 
}); 
}); 

var alt = $('.bannerscollection_zoominout_list li').children("img").attr("alt"); 
$('.mobile ul li').append('<h1>'+alt+'</h1>'); 

}); 

Я попробовал это, потому что я нашел изображения, показанные на мобильном и таблетки были не очень отзывчивыми при использовании jquery Slider Zoom In/Out Effect Fully Responsive или любой другой ползунок полки/параллакса. поэтому я спрятал галерею и использовал эту функцию для создания статического дисплея. надеюсь, что кто-то считает его полезным, а также сделать этот код лучше ..

Спасибо всем еще раз :)