Question

我一直在尝试从图像中获取属性，这些图像是使用克隆从一组基于ul的图像库派生的。

这是我想克隆的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);
  });
});
});
});

我成功获得了li和图像（根据需要从ul库中获取）

这是克隆的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>

但我想在克隆的ul上添加一个额外的h1标签。我需要为附加的h1标签获取“alt属性文本”。我没有成功这样做。

我的最终目的是在横幅中显示不适合标签和手机的相同图像（阅读：我正在使用jquery-zoom-in-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滑块或任何其他全宽/视差滑块。所以我隐藏了图库并使用此克隆功能来创建静态显示。希望有人发现它有用，并使这段代码更好..

再次感谢所有人：）

从图像中获取属性数据的问题 - JQuery

1 个答案: