Setting vars in jQuery / JavaScript I am setting a few vars in JavaScript. I typically like to make my code really readable so that it's easy to go back and edit.  I have a few questions about the code below:

1) Is this is a good way to break up the setting of the vars?  The comment seems redundant, but it seems to really help break up the code into relevant chunks.

2) When I set a var like this ~~ $IPPWrapper = $("div.iqPaginItemsPerPageWrapper") ~~ I always include the HTML element, in this case the "div".  Is this overkill? Is there a performance hit or benefit? I know in the CSS best practices, it's frowned upon.

3) I need to create an array, but I don't know the best type to use. Basically, I am just storing messages that I will use later in popups.  Is there a more common or better way to create this array?

Thanks in advance for any advice or helpful comments.

// GENERAL VARS
var UpRate = 250,
    DownRate = UpRate,
    OpenHeight = "25px";

// SET IPP VARS
var $IPPWrapper = $("div.iqPaginItemsPerPageWrapper"),
    $IPPDefault = $IPPWrapper.children("div.iqPaginDefault"),
    $IPPNonDefault = $IPPWrapper.children("div.iqPaginNonDefault"),
    $IPPOptions = $IPPWrapper.children("div.ItemsPerPage"),
    $IPPValue = $("span#ItemsPerPageValue");

// SET SB VARS
var $SBWrapper = $("div.iqPaginSortByWrapper"),
    $SBDefault = $SBWrapper.children("div.iqPaginDefault"),
    $SBNonDefault = $SBWrapper.children("div.iqPaginNonDefault"),
    $SBOptions = $SBWrapper.children("div.SortBy"),
    $SBValue = $("span#SortByValue");

// CREATE SB TEXT ARRAY
var SBTextArray = new Array();
    SBTextArray[1] = "Company Name A - Z";
    SBTextArray[2] = "Company Name Z - A";
    SBTextArray[3] = "Product Name A - Z";
    SBTextArray[4] = "Product Name Z - A";
    SBTextArray[5] = "Model Number A - Z";
    SBTextArray[6] = "Model Number Z - A";


EDIT ~~ Is this a better way of coding the above array?

// CREATE SB TEXT ARRAY
var SBTextArray = [ 
        "Company Name A - Z", "Company Name Z - A",
        "Product Name A - Z", "Product Name Z - A",
        "Model Number A - Z", "Model Number Z - A",
    ];
Your code is great so far.
The only tip I can think of is to wrap grouped variables inside a namespace / singleton.
This would make it easier to debug and perform operations of group of related elements.

    // GENERAL VARS
var UpRate = 250,
    DownRate = UpRate,
    OpenHeight = "25px";

// SET IPP VARS
var $IPP = {};
$IPP.Wrapper = $("div.iqPaginItemsPerPageWrapper");
$IPP.Default = $IPP.Wrapper.children("div.iqPaginDefault");
$IPP.NonDefault = $IPP.Wrapper.children("div.iqPaginNonDefault");
$IPP.Options = $IPP.Wrapper.children("div.ItemsPerPage");
$IPP.Value = $("span#ItemsPerPageValue");

// SET SB VARS
var $SB = {};
$SB.Wrapper = $("div.iqPaginSortByWrapper");
$SB.Default = $SB.Wrapper.children("div.iqPaginDefault");
$SB.NonDefault = $SB.Wrapper.children("div.iqPaginNonDefault");
$SB.Options = $SB.Wrapper.children("div.SortBy");
$SB.Value = $("span#SortByValue");

// CREATE SB TEXT ARRAY
var SBTextArray = [];
SBTextArray[1] = "Company Name A - Z";
SBTextArray[2] = "Company Name Z - A";
SBTextArray[3] = "Product Name A - Z";
SBTextArray[4] = "Product Name Z - A";
SBTextArray[5] = "Model Number A - Z";
SBTextArray[6] = "Model Number Z - A";


1) Use a namespace for related elements and functionality.

2) It depends. In most cases it doesn't matter unless if you different tags with the same classes. Like p.class1 and dd.class1. More info here

3) You could just use an object literal to store the message by a reference name.
Something like this.

var listing = { az: {}, za: {} };
listing.az.company = "Company Name A - Z";
listing.az.product = "Product Name A - Z";
listing.az.model = "Model Number A - Z";
listing.za.company = "Company Name Z - A";
listing.za.product = "Product Name Z - A";
listing.za.model = "Model Number Z - A";


I think your current code is good enough though.