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的功能。

Answer 2

你可以“......在不执行任何代码的情况下访问这些变量，因为浏览器会将具有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);;

Answer 3

我认为没有必要将每个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);
});

将每个div附加到Javascript变量

3 个答案: