Question

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

我的图片看起来像这样：

<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
});

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

是否有人能够帮助我解决这个问题？

Answer 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

Answer 2

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

从图像组填充二维数组

2 个答案: