I am having an issue with finding an object in jQuery.

I have the following code:

     < div style =" text-align : center ; " class ="dvAddReferenceButton">

        < img src ="../../../../Images/Eteach/buttons/referencesRecord.gif" onclick ="AddReference()" />

    </ div >

    < div id ="dvPopupEditor" class ="dvPopupEditor" style =" display : none">

       Hello World

    </ div >

On clicking the referencesRecord, I want to display the “dvPopupEditor” using jQuery Block Ui.

The problem I am having is that I need to append “[0]” to the end of the jQuery identifier in order to get the object as follows:

    function AddReference() {

        $.blockUI({

            message: $( ".dvPopupEditor" )[0] ,

            title: 'Add Reference' ,

            theme: false ,

            css: { top: '100px' , width: '500px' , height: '270px' , margin: 'auto' , left: '100px' }

        });

    }

It is the same with any object I am trying to identify using jQuery, I have to add the [0] to the end of the jQuery in order to use the object. I have never come across this issue before. The only thing I can think of that might be causing this is that my pages all use a Master page – could this by why?

Appreciate any help.