jquery - 获取div标签的ID

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>

我该怎么办:

1. 根据单击的关闭按钮获取列 ID？因此，如果单击 portlet-header_3 中的 close_button，它应该返回 column_2

2. 根据单击的关闭按钮获取 portlet id？因此，如果单击 portlet-header_1 中的 close_button，它应该返回 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") )
});

fiddle :http://jsfiddle.net/maniator/3EJBC/