Getting div tag id

Question

I have the following HTML snippet

<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>

Like me:

• get the column id depending on which close button is pressed? Therefore, if the close_button button that is located in portlet-header_3 is pressed, it should return column_2

• get the portlet id depending on which close button is pressed? Therefore, if the close_button button that is in the portlet-header_1 file is pressed, it should return portlet_1

I have the following, but this returns the closest div, portlet-header_ *, which is not what I am doing:

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

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

Answer 1

Try this (using 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/

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

You can select the closest parent div with an identifier starting with "column" as follows:

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

You can try it here.

Answer 4

Try the following:

$(".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

try it

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