2012-03-16 80 views
1

如何查找加載子元素的父元素,而無需從另一個函數明確聲明它?如何查找加載子元素而不顯式聲明它的父元素?

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

+0

你錯過了一對';' – elclanrs 2012-03-16 02:11:56

+0

謝謝。剛剛找到他們!大聲笑 – laukok 2012-03-16 02:14:23

回答

1

這是你的選擇:

  1. 您標記以某種方式父(最簡單的是可能與一類特殊的名稱),當您加載內容。然後,內容可以通過.closest(".markerName")搜索祖先鏈,從內容的任何位置查找它。
  2. 您知道關於加載內容的結構的一些信息,以便內容知道它在哪裏,並且可以從上面找到加載父項。
  3. 將負載父項存儲在全局可到達的JavaScript變量中,以便內容可以在需要時獲取該變量。

請注意,我認爲您一般希望使用.closest(selector)而不是.parents(selector)。你可以閱讀關於它here

編輯 - 根據您在您的評論問一個問題:

在一個全局變量存儲負載父母是我最值得推薦的,但既然你問如何做到這一點,這是多麼:

當你的負載孩子方法不這樣:

$(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。

+0

感謝您的答案。如何將加載父項存儲在全局變量中? – laukok 2012-03-16 02:18:06

+0

@lauthiamkok - 我添加更多的信息到我的答案的結尾。 – jfriend00 2012-03-16 02:26:39

+0

感謝您的編輯和建議。 jfriend00! :-) – laukok 2012-03-16 02:32:44

0

你可以使用closest()代替。

+0

'最接近('div')'?它和'object.parent()'一樣... – laukok 2012-03-16 02:15:59

+0

爲什麼你不想使用泛型類? – elclanrs 2012-03-16 02:18:05

+0

已經使用了太多的泛型類,所以我認爲可能有其他更好的解決方案... – laukok 2012-03-16 02:20:12