Эталонные несколько элементов в одной переменной

Question

Допустим, у меня есть следующий HTML:

<div class="city"> 
    <div class="building"></div> 
    <div class="street"></div> 
    <div class="house"></div> 
</div> 
<div class="city"> 
    <div class="building"></div> 
    <div class="street"></div> 
    <div class="house"></div> 
</div> 

Я хочу, чтобы все в переменной, так что я мог бы сделать:

var city = $('.city'), 
    building = city.find('.building'), 
    street = city.find('.street'), 
    house = city.find('.house'); 

Есть еще один способ сделать это как-то в переменной, чтобы облегчить ситуацию?

var city = $('.city'); 
city[building = $('.building')]; 
city[street = $('.street')]; 
city[house = $('.house')]; 

Так что я могу получить доступ позже как-то нравится:

city[0] 

или

city[building] 

?

Answer 1

Да, вы можете использовать объект:

var city = {}; 
city.element = $('.city'); 
city.building = city.element.find('.building'); 
city.street = city.element.find('.street'); 
city.house = city.element.find('.house'); 

Есть множество способов создания этого. Например .:

var el = $('.city'); 
var city = { 
    building: el.find('.building'), 
    street: el.find('.street'), 
    house: el.find('.house') 
}; 
city.element = el; // If you need it 

В обоих случаях, позднее использование:

city.building.css("color", "green");  // Turn text within each building green 
city.building.eq(0).css("color", "green"); // Turn the text within just the first building green 

---

Это дословный ответ на ваш вопрос, но я думаю, что я, вероятно, структурировать вещи немного по-другому. Вот как:

var cities = $(".city").map(function(city) { 
    var $city = $(city); 
    return { 
     element: $city, 
     building: $city.find('.building'), 
     street: $city.find('.street'), 
     house: $city.find('.house') 
    }; 
}).get(); 

(Обратите внимание на .get() в конце концов, это легко пропустить.)

Тогда что записи для городов, а также свойства на записях города являются специфическими для , что город. Со структурой над линией («буквальный ответ») вы можете получить building с четырьмя совпадениями, но element имеет больше, чем это (потому что некоторые элементы не содержат .building).

Так, чтобы использовать их:

cities[0].building.css("color", "green"); 

Answer 2

Вы можете расширить селектор внутри find():

var props = $('.city').find('.building, .street, .house') 

В вашем случае, он будет возвращать 6 элементов (3 для каждого из элементов с .city класса) , к которым можно получить доступ, например props[index]