jQuery - 获取 div 中的所有图像 src 并放入字段答案

【问题标题】：jQuery - get all src of images in div and put into fieldjQuery - 获取 div 中的所有图像 src 并放入字段
【发布时间】：2013-08-08 17:29:00
【问题描述】：

我想根据自己的要求修改this tutorial，但我遇到了一个问题。我是 jQuery 的初学者，我想从特定的 div 中获取所有图像源并将它们放入字段中。有一个变量images，它是字段并包含一些图像，但我希望从 div 中获取所有图像源并将它们放入字段 images 中。我知道这并不复杂，但我真的不知道该怎么做。

来源在这里http://jsfiddle.net/s5V3V/36/

这是来自 jsfiddle 源代码的变量 image，我想从 div 中填充，而不是我现在拥有的：

images = ['http://kimjoyfox.com/blog/wp-content/uploads/drwho8.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho7.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho6.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho5.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho4.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho3.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/dr-whos-tardis.png',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho9.jpg',
    'http://kimjoyfox.com/blog/wp-content/uploads/drwho1.jpg'];

提前感谢。

【问题讨论】：

标签： jquery html field fetch src

【解决方案1】：

在 dom 中准备尝试

var images = $('.thumbnailArrows').children('img').map(function(){
    return $(this).attr('src')
}).get()

【讨论】：

.get() 是多余的，就像用 jQuery 将 this 包裹在 $.map 中一样。
@AndréDion - .get() 是必需的，因为 jQuery 的 .map() 方法将返回一个 jQuery 对象，而不是一个数组。

【解决方案2】：

假设“字段”是指变量或数组：

var images = $('#imageHolder').find('img').map(function() { return this.src; }).get();

【讨论】：

.find('img') 对我来说是触发器！谢谢！！

【解决方案3】：

如果你说你想创建一个变量images，它将是一个数组，其中包含来自thumbnails div 中所有img 元素的src URL，那么你可以这样做：

var images = $("#thumbnails").find("img").map(function() { return this.src; }).get();

（如果我选择了错误的 div 作为容器，显然您可以通过将 "#thumbnails" 替换为正确的 div 的选择器来纠正它，也许是 "#imageHolder"。）

请注意，您对“字段”一词的使用不正确。您的意思似乎是“数组”，或者可能只是“变量”。

【讨论】：

【解决方案4】：

你可以循环使用 .each() 并获取属性

(function(){
    var images = [];
    $("#imageHolder img").each(function(){
      images.push($(this).attr('src'))
    })
    console.log(images);
  })()

http://jsbin.com/ogekos/1/edit

【讨论】：

为什么是匿名函数？
我拿了他的数据并在jsbin.com/ogekos/1/edit 进行了测试，所以我更容易使用匿名函数对其进行测试。显然不需要:)

【解决方案5】：

找到解决您的问题：

   var images = $(".thumbnailArrows").find('img').map(function () {
                                                            return $(this).attr('src')
                                                        }).get()

【讨论】：