jQuery parent element problem

In an attempt to target a specific div, I am using the following code:

function popupBox($area){
        //$mainBox  =   $(document).createElement('div').attr('id', 'mainBox');
        $mainBox    =   $('<div></div>').attr('id', 'mainBox');
        $($mainBox).text('main box responding');

        $parent =   $('div#custom-page-node-block-output-right div.views-row').parent( $($area) );
        $($parent).addClass('parent');

}

The only issue is there are 2 divs with the class div#custom-page-node-block-output-right div.views-row. I though since the source element whose parent I am looking for is within one of the two divs, I should only get a single element in response but it's returning both.

You can see the issue in action at http://test5omniforce.co.uk/node/3 (best viewed in Firefox). Just hover your mouse over any of the blue-colored rooms on either floor plan.

The idea is to get a green background over the immediate parent of any room over wh开发者_开发技巧ich the mouse is hovering but I get both. It's obviously because I am using classes instead of IDs but I can't use IDs in this solution.

Can anyone advice if there is a way to achieve the desired effect with adjustments to my code?

Thanks

---

Have you tried:

$('div#custom-page-node-block-output-right div.views-row').parent( $($area) ).first();

or:

$('div#custom-page-node-block-output-right div.views-row').parent( $($area) ).last();

One or the other might work but I agree with John, the id's should be unique.

Here is a jsfiddle example: http://jsfiddle.net/nxGjA/2/

---

$parent = $($area).parents('div.views-row');
$parent.addClass('parent');

Note: if the element is a jQuery element (like $parent is, since it is returned from a jQuery call,) you do not have to wrap it in $(). Also note that $area is not a jQuery object, just a passed in HTML element.