CODEWITHSUNDEEP
jquery
oshirowanen
oshirowanen

Reputation: 15925

Getting the ID's of div tags

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>

How do I:

  1. get the column id depending on which close button is clicked? So if close_button is clicked which is in portlet-header_3, it should return column_2

  2. get the portlet id depending on which close button is clicked? So if close_button is clicked which is in portlet-header_1, it should return portlet_1

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

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

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

Upvotes: 5

Views: 436

Answers (5)

Naftali
Naftali

Reputation: 146302

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/

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

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

Upvotes: 0

Chandu
Chandu

Reputation: 82893

Try this:

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

Upvotes: 2

karim79
karim79

Reputation: 342635

You can select the closest parent div with id starting with 'column` like so:

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

You can try it here.

Upvotes: 2

jcolebrand
jcolebrand

Reputation: 16025

You would need to use classes as well, and use .closest(selector) or you would need to do parent().parent().pa... up the tree to the one you wanted. .closest(selector) is much easier and allows you to add new elements later inbetween and inline.

That's two options.

Here's what it would look like in practice:

<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')
}

Upvotes: 2

Related Questions