2

我知道可以使用如下代码将 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 解决方案都可以。

4

3 回答 3

1

我认为没有必要将每个 jQuery 对象分配给一个 javascript 变量/对象。因为 jQuery 语法非常好用。
您可以使用 jQuery 轻松引用 html 元素，如下所示：

$("div") // all div elements
$("div#foo") // div with id="foo"
$(".foo") // all element which have 'foo' class

但是，如果您想分配给 JS 对象，请使用：

var obj = new Object() // or = {};
$("div[id]").each(function(){
    obj[$(this).attr("id")] = $(this);
});
于 2013-08-03T05:37:58.527 回答
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，但不适用于 JavaScript 变量。

但是，如果一个 ID 恰好是一个有效的 JavaScript 变量名，那么它可以作为对象的助记属性进行访问：

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

看这个演示。

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

于 2013-08-03T05:16:04.527 回答
1

您可以“......在不执行任何代码的情况下访问这些变量，因为浏览器会将具有 id 属性的元素自行放入全局范围。” 根据 Blender 在下面评论中的发现。因此，可以通过 div 的 ID 访问这些变量，如下所示：

http://jsfiddle.net/xhWwH/2

编辑：保留我之前的答案以供参考。

虽然我不同意这种类型的编程（非常不安全！！！！）。我相信这就是你要找的：http: //jsfiddle.net/haoudoin/xhWwH/

   $("div").each(function(index) {
       console.log(this.id);
       eval("" +this.id + "=this;");
   });

   console.log("creates: " + bozo);
   console.log("creates: " + ranger);
   console.log("creates: " + smokey);
   // reference to your div
   alert(bozo.id);;
于 2013-08-03T05:22:12.153 回答