CODEWITHSUNDEEP
javascriptjquery
Lee Loftiss
Lee Loftiss

Reputation: 3205

attach every div to Javascript variable

I know a DIV can be attached to a Javascript variable with code like this:

var targetDiv = jQuery('#targetDiv');

However, I am looking for a way to attach ALL the DIVs or ones of a certain class to Javascript variables.

So, if I have the following elements:

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

I will end up with the variables:

bozo
ranger
smokey

I've been building lots of jQuery apps and they often have many divs that need to be kept track of in my code. I want to find an easier way to get control of these divs than assigning them to variables at the beginning of my app.

Either a jQuery or Javascript solution would be fine.

Upvotes: 2

Views: 356

Answers (3)

haoudoin
haoudoin

Reputation: 151

You can "...access those variables without executing any code, as browsers put elements with an id attribute into the global scope on their own." According to Blender's findings in the comment below. So one can access those variables by the div's IDs as demonstrated here:

http://jsfiddle.net/xhWwH/2

EDIT: Kept my previous answer for reference purpose.

Although I do not agree with this type of programming (very unsafe!!!!). I believe this is what you are looking for: 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);;

Upvotes: 1

frogatto
frogatto

Reputation: 29285

I think there is no need to assign every jQuery object to a javascript variable/object. Because the jQuery syntax is very very easy to use.
You can refer to a html element so easy with jQuery, like this:

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

However if your want to assign to a JS object use this:

var obj = new Object() // or = {};
$("div[id]").each(function(){
    obj[$(this).attr("id")] = $(this);
});

Upvotes: 1

theftprevention
theftprevention

Reputation: 5213

The most effective way would be to use a JavaScript object.

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

With your current HTML, the divs could then be accessed like so:

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

You can't name the JavaScript variables directly after the div IDs, because they have different naming conventions. For example, test-div is a valid ID for an HTML element, but not for a JavaScript variable.

However, if an ID just so happens to be a valid JavaScript variable name, then it can be accessed as a mnemonic property of the object:

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

See this demo.

Edit: Added functionality to detect when the div has no ID, based on suggestions from icktoofay and ABFORCE.

Upvotes: 1

Related Questions