jquery - 获取div标签的ID

我有以下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？因此，如果单击位于portlet-header_3中的close_button，它将返回column_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") )
});

最佳答案

试试看(使用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/

关于jquery - 获取div标签的ID，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6764570/