javascript - 将每个 div 附加到 Javascript 变量

Question

我知道可以使用如下代码将 DIV 附加到 Javascript 变量:

var targetDiv = jQuery('#targetDiv');

但是，我正在寻找一种将所有 DIV 或某个类的 DIV 附加到 Javascript 变量的方法。

所以，如果我有以下元素:

<div id='bozo'>
<div id='ranger'>
<div id='smokey'>

我最终会得到变量:

bozo
ranger
smokey

我一直在构建大量 jQuery 应用程序，它们通常有许多需要在我的代码中跟踪的 div。我想找到一种比在应用程序开头将它们分配给变量更简单的方法来控制这些 div。

jQuery 或 Javascript 解决方案都可以。

Answer 1

最有效的方法是使用 JavaScript 对象。

var divs = {};
$("div").each(function() {
    if ($(this).attr('id') !== undefined) {
        divs[$(this).attr('id')] = $(this);
    }
});

使用当前的 HTML，可以像这样访问 div:

divs["bozo"].show(0);
divs["ranger"]show(0);
divs["smokey"].show(0);

您不能直接在 div ID 之后命名 JavaScript 变量，因为它们具有不同的命名约定。例如，test-div 是 HTML 元素的有效 ID，但 not for a JavaScript variable .

但是，如果 ID 恰好是有效的 JavaScript 变量名称，则可以将其作为对象的助记属性进行访问:

divs.bozo.show(0);
divs.ranger.hide(0);

See this demo.

编辑:根据 icktoofay 和 ABFORCE 的建议，添加了检测 div 何时没有 ID 的功能。