如何在不显式声明的情况下找到加载子元素的父元素？

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);

索引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 page。

编辑：

solution

Answer 1

这些是您的选择：

1. 您在加载内容时以某种方式标记父级（最简单的可能是使用特殊的类名）。然后内容可以使用.closest(".markerName") 向上搜索祖先链，以从内容中的任何位置找到它。
2. 您对已加载内容的结构有所了解，以便内容知道它的顶部在哪里，并且可以在其上方找到加载父级。
3. 您将加载父级存储在全局可访问的 javascript 变量中，以便内容可以在需要时获取它。

注意，我认为您通常希望使用.closest(selector) 而不是.parents(selector)。你可以阅读它here。

编辑 - 根据您在评论中提出的问题：

将负载父级存储在全局变量中是我最不推荐的选项，但既然你问如何做到这一点，那就是如何做到这一点：

当您的 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()。