Find an element by ID using another element's className

Question

I have a menu - each menu item has a class name. When I click on the menu item I am using JQuery to find a div with a matching ID name. The problem is that the search isn't strict. If something has a class name like elo-1 and I have div IDs name elo-1 and elo-11 there is no way (the way I am doing this) to get just elo-1.

I would like to get an exact match. I would like to click on elo-1 and only get elo-1, not elo-1, elo-11, elo-12, etc. Anyone have any ideas?

Here is teh code I am using:

        $(document).ready(function() {

    var myLayoutId = $(this).attr("layoutId");


    $("#start_page").show().siblings().hide();
    $("#navBar").hide();
    $("#refs").hide();

    $("li").click(function() {
        var thisID = $(this).attr("class");
        $("#mainBdy div:#"+thisID).show().siblings().hide();
        $('#mainBdy div[id^="'+thisID+'"]').show();


        $("#mainBdy div:#"+thisID).css("width","30%");
        $("#mainBdy div:#"+thisID).css("margin-left","-80px");
        $("#mainBdy div:#"+thisID).css("margin-top","-50px");
        $("#mainBdy div:#"+thisID).css("float","left");


    });


    $("#start_page_accept").click(function() {
        $("#navBar").show();
        $("#refs").show();
        $("#start_page").hide().next().show();
    });

    $("#menu").collapsible({
        effect: "slide",             // The effect to use when expanding and collapsing the menu. 
        initialCollapse: true       // When true, collapses the menu when the page loads.
    });

});

Answer 1

Replace this:

    $("#mainBdy div:#"+thisID).show().siblings().hide();
    $('#mainBdy div[id^="'+thisID+'"]').show();


    $("#mainBdy div:#"+thisID).css("width","30%");
    $("#mainBdy div:#"+thisID).css("margin-left","-80px");
    $("#mainBdy div:#"+thisID).css("margin-top","-50px");
    $("#mainBdy div:#"+thisID).css("float","left");

With this:

$('#' + thisID).show().css({
    'width': '30%',
    'margin-left': '-80px',
    'margin-top': '-50px',
    'float': 'left'
}).siblings().hide();

A couple of notes:

• Chaining in jQuery is super powerful and avoids re-querying the DOM if you are going to do multiple things with the same element. You could likewise store the results of a jQuery search doing something like var $div = $('#' + thisID); - in either case, you just don't want to do the same selector over and over.
• IDs are supposed to be unique in the document, so I am assuming there is only one element with an ID of "elo-1" in the document. If that's true, which it should be, doing a complicated selector like '#mainBdy div[id^="'+thisID+'"]' is just stopping jQuery from being able to use the native getElementById which is a gallizion times more effective (not to mention cleaner).
• As you can see, css accepts an object so you don't have to call it more than once. I would personally simply add a class to the menu item and handle the style in my stylesheet. It is much easier from a maintainability standpoint.