Question

i’m trying to create a context menu for jQuery, i was using the jQuery UI dialog and modifying
it to fit my needs:

var menu = $(this);
menu.dialog('option', 'position', [jsEvent.clientX, jsEvent.clientY]);
    menu.unbind('dialogopen');
    menu.bind('dialogopen', function(event, ui) {

        $('.ui-dialog-titlebar').hide();
        $('.ui-widget-overlay').unbind('click');
        $('.ui-widget-overlay').css('opacity', 0);
        $('.ui-widget-overlay').click(function() {
            menu.dialog('close');
        });
    });
    menu.dialog('open');

now, this only works if there is no UI that uses .ui-dialog-titlebar since they will disappear when ever context menu fires

i thought of doing this:

var id = '#'+$(this).attr('id');

and select elements only in my menu

$(id+' .ui-dialog-titlebar').hide();

but it doesn’t seems to work, the .ui-dialog-titlebar is still there

how do i select elements in the menu ONLY?

Answer 1

To find all elements with a certain class within another element you can use find() :

$(this).find('.ui-dialog-titlebart').hide();

If you’d like to hide all elements with a certain class except UL elements :

$('.ui-dialog-titlebar').not('ul').hide();

or target just LI elements

$('li.ui-dialog-titlebar').hide();