0

可以说我有以下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]

?

4

2 回答 2

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有更多匹配项（因为其中一些.city元素没有.building）。

所以要使用它们：

cities[0].building.css("color", "green");
于 2013-09-17T20:48:01.017 回答
0

您可以在内部扩展选择器find()：

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

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

于 2013-09-17T20:51:52.427 回答