获取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");