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

以下是您的选择：

在加载内容时，您以某种方式标记父级（最简单的可能是使用特殊的类名）。然后，内容可以使用.closest(".markerName")搜索祖先链，以便从内容中的任何位置查找它。
您对已加载内容的结构有所了解，以便内容知道它的顶部位置，并且可以在其上方找到负载内容。
您将加载父项存储在全局可访问的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()。

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

2 个答案: