獲取div標籤

Question

我有以下的HTML代碼段

<div id="column_1"> 
    <div id="portlet_1"> 
     <div id="portlet-header_1"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_1"> sub header goes here </div> 
     <div id="portlet-content_1"> content goes here </div> 
     <div id="portlet-footer_1"> footer goes here </div> 
    </div> 
    <div id="portlet_2"> 
     <div id="portlet-header_2"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_2"> sub header goes here </div> 
     <div id="portlet-content_2"> content goes here </div> 
     <div id="portlet-footer_2"> footer goes here </div> 
    </div> 
</div> 

<div id="column_2"> 
    <div id="portlet_3"> 
     <div id="portlet-header_3"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_3"> sub header goes here </div> 
     <div id="portlet-content_3"> content goes here </div> 
     <div id="portlet-footer_3"> footer goes here </div> 
    </div> 
    <div id="portlet_4"> 
     <div id="portlet-header_4"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_4"> sub header goes here </div> 
     <div id="portlet-content_4"> content goes here </div> 
     <div id="portlet-footer_4"> footer goes here </div> 
    </div> 
</div> 

的ID的如何：

1. 得到列編號取決於被點擊其關閉按鈕？因此，如果在portlet-header_3中單擊了close_button，它應該返回column_2

2. 根據單擊哪個關閉按鈕獲取portlet ID？所以，如果點擊close_button這是portlet的header_1，它應該返回portlet_1

我有以下，但返回最接近DIV，portlet的header_ *，這不是我所追求的：

$(".close_button").live('click', function(event) { 
    event.preventDefault(); 

    var that = this; 
    alert($(that).closest("div").attr("id")) 
}); 

Answer 1

試試這個（使用jQuery .parents()）：

$(".close_button").live('click', function(event) { 
    event.preventDefault(); 
    var that = this; 
    alert($(that).parents("[id^=column_]").attr("id")) 
}); 

小提琴：http://jsfiddle.net/maniator/3EJBC/

Answer 2

您還需要使用類，並使用.closest(selector)，否則您需要在樹上執行parent().parent().pa...。 .closest(selector)要容易得多，並且允許您稍後添加新元素inbetween和inline。

這是兩種選擇。

下面是它會是什麼樣子的做法：

<div id="column_1" class="columns"> 
    <div id="portlet_1" class="portlets"> 
     <div id="portlet-header_1"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_1"> sub header goes here </div> 
     <div id="portlet-content_1"> content goes here </div> 
     <div id="portlet-footer_1"> footer goes here </div> 
    </div> 
    <div id="portlet_2" class="portlets"> 
     <div id="portlet-header_2"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_2"> sub header goes here </div> 
     <div id="portlet-content_2"> content goes here </div> 
     <div id="portlet-footer_2"> footer goes here </div> 
    </div> 
</div> 

<div id="column_2" class="columns"> 
    <div id="portlet_3" class="portlets"> 
     <div id="portlet-header_3"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_3"> sub header goes here </div> 
     <div id="portlet-content_3"> content goes here </div> 
     <div id="portlet-footer_3"> footer goes here </div> 
    </div> 
    <div id="portlet_4" class="portlets"> 
     <div id="portlet-header_4"> <input type="button" class="close_button"> </div> 
     <div id="portlet-sub-header_4"> sub header goes here </div> 
     <div id="portlet-content_4"> content goes here </div> 
     <div id="portlet-footer_4"> footer goes here </div> 
    </div> 
</div> 

function(){ 
    var column_id = $(this).closest('.columns').attr('id') 
    var portlet_id = $(this).closest('.portlets').attr('id') 
} 

Answer 3

您可以選擇與ID最接近父DIV以「column`像這樣：

$(that).closest("div[id^='column']").attr("id"); 

You can try it here.

Answer 4

嘗試這個：

$(".close_button").live('click', function(event) {  
    event.preventDefault();  
    var that = this;  
    alert($(that).closest("div[id^='column_']").attr("id")) ; // For column 
    alert($(that).closest("div[id^='portlet-header_']").attr("id")) ; // For portlet 
}); 

Answer 5

試試這個

var columnId = $(this).closest("div[id^='column'").attr("id"); 
var portletId = $(this).closest("div[id^='portlet'").attr("id");