JQuery 从 <img> 中获取所有 <alt> 标签并在 <ul><li> 中显示它们答案

【问题标题】：JQuery Get all <alt> tags from an <img> and show them in an <ul><li>JQuery 从 <img> 中获取所有 <alt> 标签并在 <ul><li> 中显示它们
【发布时间】：2010-11-22 08:07:21
【问题描述】：

这是我的 html（我使用 Galleria Image Gallery - 基于 JQuery）

<div id="galleria">
            <img alt="Productname 1" src="bens_img/1.jpg">
            <img alt="Productname 2" src="bens_img/2.jpg">
            <img alt="Productname 3" src="bens_img/3.jpg">
            <img alt="Guess what?" src="bens_img/4.jpg">
        </div>

伪代码

Get string from <alt> from <img>
Create a new <li> and paste the <alt> string from <img> in it

这应该使用所有（即：四个）img alt 字符串来完成。它应该是这样的：

<ul class="textformat">
<li>Productname 1</li>
<li>Productname 2</li>
<li>Productname 3</li>
<li>Guess what?</li>
</ul> <!-- yeah this was all done by java-script -->

【问题讨论】：

标签： jquery html image galleria

【解决方案1】：

像这样：

$("#galleria > img").each(function(i, ele) {
  $(".textformat").append("<li>"+$(ele).attr("alt")+"</li>");
});

【讨论】：

@user4907060 没问题。很高兴我能帮忙。 :)
@lonesomeday 非常正确，这里使用.attr() 是为了炫耀jQuery的最大数量。 :)

【解决方案2】：

$("img[alt]")

用于标记每个具有“alt”的图像

【讨论】：

【解决方案3】：

您需要.attr jQuery 选择器：

$('#galleria > img').each(function(){
  $('.textformat').append('<li>'+ $(this).attr('alt') +'</li>');
});

或者您可以使用$('#galleria').find('img') 或$('#galleria').children('img')

【讨论】：

【解决方案4】：

尝试使用jQuery的map()函数：

$('#galleria img').map(function() {
  return '<li>' + this.alt + '</li>';
}).appendTo('ul.textformat');

【讨论】：

【解决方案5】：

您可以扩展 Galleria 以将 alt 标签或描述放在另一个 div 中，不知道如何将其放入 li，我猜是一些 jQuery extend: function() { this.bind(Galleria.IMAGE, function(e) { $('.caption').html(this.$('info-description').html()); }) }

【讨论】：