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？因此，如果在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") )
});

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)更容易，允许您稍后在内联和内联中添加新元素。

这是两个选择。

这是实践中的样子：

<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，其中id为'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");

获取div标签的ID

5 个答案: