Заполнение двумерного массива из групп изображений

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 

Кроме того, что путь ваш код пытается создать и использовать массив/объект, кажется, вы хотите суб массивы для хранения объектов JQuery, которые сами по себе содержат отдельные элементы DOM IMG? Тем не менее вам нужен объект, в котором свойства являются массивами.

Вы не помечать вопрос, как 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 или запрос, который фильтрует изображения по классам. Используйте названия для уникальной информации ...