从图像组填充二维数组答案

【问题标题】：Populating a two-dimensional array from image groups从图像组填充二维数组
【发布时间】：2012-02-23 03:07:52
【问题描述】：

我有几张图片，我需要能够按标题对它们进行分组和选择，并且还可以单独操作它们。

我的图片是这样的：

<img src="1.jpg" title="cat">
<img src="2.jpg" title="cat">
<img src="3.jpg" title="cat">
<img src="1.jpg" title="dog">
<img src="2.jpg" title="dog">
<img src="3.jpg" title="dog">
<img src="1.jpg" title="horse">
<img src="2.jpg" title="horse">
<img src="3.jpg" title="horse">

...等等。

我正在尝试创建一个如下所示的数组：

imgArray = [cat[1,2,3], dog[1,2,3], horse[1,2,3]];

... 其中第一个数组级别是组（标题），并且在每个组内是具有匹配标题的实际元素的数组。我需要能够做这样的事情：

var imgGroup = imgArray[cat];
doThings(imgGroup)
function doThings(target){
   var pri = target[0], sec = target[1], ter = target[2];
   pri.doThis(); sec.doThat(); ter.doTheotherthing();
});

到目前为止，我正在这样做：

img.each(function(){
   var self = $(this),  title = self.attr('title');
   imgArray.push([title, self]) 
   imgArray = $.unique(imgArray) //remove duplicate titles
});

但这显然是行不通的，可能是因为让我看起来很愚蠢：/

有人能帮我解决这个逻辑吗？

【问题讨论】：

等等，你想做什么？创建数组或对现有数组做些什么？

标签： javascript html arrays image

【解决方案1】：

我怀疑你真正需要的结构是一个对象（而不是数组），其中你对每种动物都有一个属性，每个属性的值都是一个数字数组：

var imgObj = {
   "cat" : [1, 2, 3],
   "dog" : [1, 2, 3],
   "horse" : [1, 2, 3]
}

那么你可以说：

imgObj["cat"]          // give the array [1,2,3]
imgObj["horse"].length // gives 3
imgObj["dog"][0]       // accesses the first value in the dog array

除了您的代码尝试创建和使用数组/对象的方式之外，您似乎希望子数组保存本身包含单个 DOM img 元素的 jQuery 对象？你仍然想要一个属性是数组的对象。

您没有将您的问题标记为 jQuery，尽管从您现有的代码中您似乎正在使用它，所以您可以通过以下方式从您的标记中创建上述结构：

var imgObj = {};
$("img").each(function() {
   var title = this.title;
   if (!imgObj.hasOwnProperty(title))
       imgObj[title] = [];

   imgObj[title].push($(this));
});

然后您应该能够调用现有的doThings() 函数，如下所示：

doThings(imgObj["cat"]);    // passes just the cat array

【讨论】：

您回答的第二部分正是我所需要的。我什至没有想过要使用对象，但我可以看到它是如何简化事情并使其更容易引用的。谢谢！

【解决方案2】：

为什么不使用类名而不是标题？然后，您可以使用 getELementsdByClassName 或按类别过滤图像的查询来处理组中的所有“马”元素。使用标题获取唯一信息...

【讨论】：