JQuery проверить, если элемент объекта находится внутри другого

Question

Я пытаюсь создать простое всплывающее меню jQuery, но, похоже, не могу понять сценарий, чтобы проверить, находится ли элемент в предопределенном элементе.

Нажатие на всплывающем триггере запускает функцию jQuery.Функция сохраняет следующие переменные: элемент, по которому щелкнули (js_popup-trigger), его основной родительский элемент (js_popup-container) и фактическое меню с элементами меню (js_popup-menu).

После запускащелчок мышью, меню исчезает, а в документ добавляется прослушиватель событий, чтобы проверить, щелкнул ли пользователь за пределами меню, и в этом случае оно должно закрыться; с меню ничего не произойдет, если пользователь щелкнет внутри него..

Это часть, которую я не могу понять - как я могу определить, нажал ли пользователь внутри всплывающего элемента или за его пределами?

Я пробовал это: if(!$(e.target).parent('.js_popup-container').length){

Но это не работает, когда у вас есть несколько всплывающих окон на странице, потому что, если вы щелкнете где-нибудь еще, включая другое всплывающее окно, текущее должно закрыться, но если вы нажмете другое всплывающее окно с тем же классом js_popup-контейнер, то он останется открытым, потому что технически он находится внутри элемента с этим классом.

/*  Popup menu toggle
===========================================*/
$(document).on("click",".js_popup-trigger", function(e){
    e.preventDefault();


    //Set variables
    var element     = $(e.currentTarget),
        container   = element.parent('.js_popup-container'),
        menu        = element.next('.js_popup-menu');


    //Toggle the menu
    menu.fadeToggle(200);


    /*  Create a click listener for the document
    *   This is to close the menu if clicked outside of it */
    $(document).click(function closePopup(e){


        //If the clicked item is not in the popup, close it
        if(!$(e.target).parent(container).length){
            menu.fadeToggle(200);
            $(document).unbind('click',closePopup);
        }
    });
});

В конце концов, что яхочу достичь - это функция, которую можно применить к любому всплывающему меню, просто добавив 3 класса.Должна быть возможность иметь несколько всплывающих меню на одной странице, и когда вы щелкаете в любом месте за пределами меню, оно должно закрываться.

Конечно, я открыт для предложений по улучшению кода, но я неЯ не хочу использовать уже существующие плагины.

РЕДАКТИРОВАТЬ: Я знаю, что уже есть другие вопросы и решения, очень похожие на этот, но разница в том, что решения, приведенные в других вопросах, заключается в проверке, есливыбранная цель находится внутри другого элемента с определенным именем класса / идентификатором / селектором.

Мне нужно что-то немного другое, у меня уже есть родительский элемент (всплывающий контейнер), сохраненный в переменной.Мне нужно знать, находится ли выбранный элемент внутри этого сохраненного элемента.

Используя уже найденные решения, я сталкиваюсь с проблемой, потому что у меня будет несколько всплывающих окон на странице, поэтому, если у меня открыто одно всплывающее окнои я нажимаю на другое, первое всплывающее окно остается открытым вместо закрытия, потому что, используя другие решения, я проверяю элемент с классом контейнера всплывающих окон, который у них обоих есть, что означает, что первое всплывающее окно не закрывается.

Answer 1

Я нашел решение, которое работает для моего текущего приложения.

$(document).on("click",".js_popup-trigger", function(e){
    e.preventDefault();

    //Set variables
    var element     = $(e.currentTarget).closest('.js_popup-trigger'),
        container   = element.parent('.js_popup-container'),
        menu        = element.next('.js_popup-menu');

    //Toggle the menu
    menu.fadeToggle(200);

    //Add the open classes to the container and trigger
    container.toggleClass('js_popup-container--open');
    element.toggleClass('js_popup-trigger--open');

    /*  Create a click listener for the document
    *   This is to close the menu if clicked outside of it */
    $(document).click(function closePopup(e){

        //If the clicked item is not in the popup, close it
        if(!$(e.target).closest(container[0]).length && element.is(":visible")){

            //Close the popup
            menu.fadeOut(200);

            //Remove the added classes
            container.removeClass('js_popup-container--open');
            element.removeClass('js_popup-trigger--open');

            //Unbind the closePopup function from the document
            $(document).unbind('click',closePopup);
        }
    });
});

Это позволяет вам добавлять на одну и ту же страницу столько всплывающих окон, сколько вы хотите, и все они будут работать независимо от других - все другие найденные мной решения использовали общий класс, чтобы проверить, открыто ли всплывающее окно вместо фактический элемент / объект, что означало, что если у вас было открыто другое всплывающее окно с тем же классом, то нажатие на новое всплывающее окно не закрыло бы первое. Такой подход решает эту проблему.

Надеюсь, что это полезно для других, если у кого-то есть идеи получше, я бы хотел их услышать!

Answer 2

Это зависит от того, насколько высокопроизводительным вы хотите, чтобы ваш метод был, но вот один краткий вариант, предполагающий, что element и container являются объектами jQuery.

if(element.parents().find(container).length == 1){
   // do work
}