Как найти родительский элемент, который загружает дочерние элементы без явного объявления этого?

Question

Как найти родительский элемент, который загружает дочерние элементы без явного объявления его из другой функции?

jquery,

$(document).ready(function(){

        $('.load-child').load_child();

    });


    (function($) {

        $.fn.extend({ 

            load_child: function(options) {

                var o = $.extend({
                    target:'.parent'
                }, options);

                var $this = this;

                var $cm = this.click(function(e) {

                    var object = $(this);
                    var path = object.attr('href');

                    $(o.target).load(path, function(){

                        $this.child();

                    });

                    return false;

                });


                $this.child = function() {

                    $('.find-parent').click(function(event){

                        var object = $(this);
                        object.parents('.parent').css({background:'red'});

                        return false;
                    })

                };


                return $cm;

            }
        })
    })(jQuery);

index html,

<a href="child.php" class="load-child">load child</a>

<div class="container">

    <div class="parent">    

    </div>

</div>

дочерняя страница,

<div>
    <div></div>
    <div></div>
    <div><a href="#" class="find-parent">click me</a></div>
</div>

Я могу получить элемент .parent выше, потому что я явно объявляю родительское имя,

object.parents('.parent').css({background:'red'});

Но как насчетесли имя родителя неизвестно или постоянно меняется?Есть ли какой-либо универсальный метод для поиска / отслеживания элемента, который используется для загрузки страницы?

На загруженной странице может быть множество элементов div, поэтому я не могу этого сделать,

object.parent().css({background:'red'});

или

object.parents(div).css({background:'red'}); // this will go up to the very top of div element.

страница jsfiddle .

Редактировать:

решение

Answer 1

Это ваши варианты:

1. Когда вы загружаете контент, вы каким-то образом помечаете родителя (проще всего, наверное, с помощью специального имени класса). Затем содержимое может выполнить поиск в цепочке предков с помощью .closest(".markerName"), чтобы найти его в любом месте содержимого.
2. Вы знаете кое-что о структуре загруженного контента, чтобы контент знал, где он находится сверху, и можете перейти на один уровень выше, чтобы найти родителя загрузки.
3. Вы сохраняете родительский элемент загрузки в глобально доступной переменной javascript, чтобы содержимое могло извлекать ее, когда это необходимо.

Обратите внимание, я думаю, что вы обычно хотите использовать .closest(selector) вместо .parents(selector). Вы можете прочитать об этом здесь .

Редактировать - на основе вопроса, который вы задаете в своем комментарии:

Хранение родительского элемента загрузки в глобальной переменной - мой наименее рекомендуемый вариант, но, поскольку вы спрашиваете, как это сделать, вот как:

Когда ваш метод load-child делает это:

$(o.target).load(path, function(){

вы бы просто запомнили значение o.target следующим образом:

window.loadTarget = $(o.target);

Тогда window.loadTarget будет глобальной переменной, содержащей место, где вы последний раз загружали контент.

Лично я бы предпочел, чтобы вы использовали специальное имя класса. Итак, вы бы заменили это:

$(o.target).load(path, function(){

с этим:

$(o.target).addClass("loadTarget").load(path, function(){

, а затем в любом месте содержимого, в котором вы хотите найти цель загрузки, вы сделаете следующее:

$(this).closest("loadTarget")

Этот второй параметр исключает любые новые глобальные переменные и поддерживает несколько loadTargets одновременно.

Answer 2

Вы можете использовать closest() вместо.