從圖像組填充二維數組

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]];

...，其中第一個數組級別是group（title），每個組中是帶有匹配標題的實際元素的數組。 我需要能夠執行以下操作：

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或按類過濾圖像的查詢來處理組中的所有“馬”元素。 使用標題獲取唯一信息...