明示的に宣言せずに子要素をロードする親要素を見つける方法

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

しかし、親の名前が不明であるか、または常に変更されている場合はどうなりますか？ページを読み込むために使用される要素を検索/トレースするための一般的な方法はありますか？

jsfiddle pageをロードされたページには、div要素の負荷を有することができるので、私はこれを行うことができない、

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

または

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

。

編集：

solution

Answer 1

これらは、あなたのオプションは以下のとおりです。

1. あなたがコンテンツをロードするときは、（最も簡単には特別なクラス名である可能性があり）何らかの方法で親をマーク。次にコンテンツは.closest(".markerName")で祖先チェーンを検索して、コンテンツ内のどこからでも見つけることができます。
2. ロードされたコンテンツの構造について知っているので、コンテンツがどこにあるのか分かっていて、ロードの親を見つけるために上に行くことができます。
3. ロード親をグローバルに到達可能なjavascript変数に格納すると、コンテンツが必要なときにコンテンツを取得できるようになります。

.parents(selector)の代わりに.closest(selector)を使用することをお勧めします。あなたはそれについてhereを読むことができます。

編集 - あなたのコメントで尋ねる質問に基づく：グローバル変数の負荷の親を保存

は私の最も推奨されるオプションですが、あなたがそれを行う方法を尋ねるので、これはどのようにある：

これはあなたの負荷-childメソッドがない場合：

012：

$(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") 

この2番目のオプションは、新しいグローバル変数を回避し、複数のloadTargetを同時にサポートします。

Answer 2

あなたが代わりにclosest()を使用することができます。