Question

EDIT: Never mind. Figured out the issue. Just made height an array and name each id. Der. thanks anyway.

I’ve searched and not turned up much on this. I’ve got a simple script that just animates a drop down menu sliding out when hovered over. The issue is if I quickly move back and forth between two or more of the menu items the height variable I set at the begin of each hover can be overwritten. I’ve got a work around that fixes it after moving off and then back on again by resetting the height to auto when it’s off screen but I wont to prevent it from happening at all. Usually I would make a dynamic avariable in other languages I’ve worked in like:

$height = $(this).attr("id")+"height";

alert($$height);

//which would theoretically alert the height of whatever triggered it. 

Is there a way to do this in jQuery so each element that calls the function has it’s own height variable?

EDIT2: Since there is interest I’ll paste the whole thing.

   $("#NavMenu > li").hover(
           function () {
               var height = {};
               height[$(this).attr("id")] = $(this).find("ul").css("height");
               $(this).find("ul").css("height", "0px");
               $(this).find("ul").css("left", "auto");
               $(this).find("ul").animate({ height: height[$(this).attr("id")] }, 300)
           },
            function () {
                $(this).find("ul").css("left", "-999em");
                $(this).find("ul").css(height, height[$(this).attr("id")])
            }
        )

Answer 1

Yes, you can do that:

$('.obj').get(0).key = 'value';

or

$('.obj').get(0)['key'] = 'value'

Though it’s better to use .data():

$('.obj').data('key', 'value');

---

Tips

1. You can chain multiple calls, like this:

$('.obj').css('color', 'red').data('key', 'value');

2. You can pass an object to .css():

$('.obj').css({
    'width': 100,
    'height': 100
});

3. If you don’t change other CSS properties, you can use .width()and .height() to set and get an element’s width:

HTML

<div id='box'></div>

CSS

#box {
    width: 200px;
    height: 100px;
}

JavaScript

var $box = $('#box');
// 200x100
alert( $box.width() + 'x' + $box.height() );

4. You may have noticed in the previous example that I saved a reference to $('#box') in a variable. There are some cases when you can’t use chaining, like this:

var $box = $('#box');
setTimeout(function() {
    $box.animate({ 'width': 100 }, 100);
}, 1000);
setTimeout(function() {
    $box.animate({ 'height': 200 }, 100);
}, 1000);

If you have to do that, always save a reference to the element – that’s called caching. Otherwise jQuery would have to search for it multiple times.