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

有多种方法可以创建它。 E.g：

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具有更多匹配（因为某些.city元素没有{{ 1}}在其中）。

所以要使用它们：

.building

Answer 2

您可以在find()：

中扩展选择器

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

在您的情况下，它将返回6个元素（每个元素3个.city类），可以像props[index]

一样访问

在单个变量中引用几个元素

2 个答案: