Why am I getting an error when I try to get the height of an element from a rel tag?

Question

I'm trying to build the functionality of revealing more of an element when you click on a link that has a rel tag that references it.

    <div class="reveal-more"><a href="#" rel="#new-deals">View More Deals &#9660;</a></div>

$(".reveal-more a").click( function() {
    var moreContainer = $(this).attr('rel');
    var moreContainerHeight = $("'" + moreContainer + "'").height;
    alert(moreContainerHeight);

    return false;
});

Chrome keeps throwing the error - Syntax error, unrecognized expression: '#new-deals'

Answer 1

You seem to be having issues with the wrapping of the variable, try changing the code to the following, I found that it works O.K. with the code as this:

<div class="reveal-more"><a href="#" rel="#new-deals">View More Deals &#9660;</a></div>

    $(".reveal-more a").click( function() {
        var moreContainer = $(this).attr('rel');
        var moreContainerHeight = $(moreContainer).height();
        alert(moreContainerHeight);

        return false;
    });

I believe your problem was that you had a string object and you were wrapping the string in '' when jQuery automatically handles this.

EDIT: Amended code

Answer 2

I think it's because you're asking for a height of a class.

Really you need to ask for the height of an ID.

A class could relate to a series of divs, all with different heights.