0

I want to get the ID or class if the link button is clicked

<div class="pane alt" id="a">
<h3>Nick says:</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada
<p><a href="#" class="btn-delete">Delete</a>  <a href="#" class="btn-unapprove">Unapprove</a>  <a href="#" class="btn-approve" style="display:none">Approve</a>

the code that i created to process the clicked button is this which resulting "undefined"

$('.btn-unapprove').click(function(){

    var id = $(this).attr('id');
    alert(id); 

});

so is it possible to get the div id if the link is clicked ? if so how to to do it?

JJJ
  • 32,902
  • 20
  • 89
  • 102
Apollo Belvedere
  • 7
  • 1
  • 1
  • 3
  • 1
    Use this instead: `var id = $(this).closest('.pane').attr('id');` – Joe May 15 '14 at 12:17
  • i tried to use .closest() but it seems it wont work when i try it on the browser the alert wont pop (not even undefined) and other functions seems not running. can someone help please. – Apollo Belvedere May 15 '14 at 12:24
  • Use `prop` instead of `attr` for such a live property for performance purpose. – atondelier May 15 '14 at 12:26

6 Answers6

4

First of all: You should correct you HTML. Because if your HTML is not loaded correctly in DOM than the Jquery/Javascript also not provide correct result.

In your HTML you are missing some closing tags like - "</p>, </div>"

<div class="pane alt" id="a">
  <h3>Nick says:</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada</p>
  <p>
    <a href="#" class="btn-delete">Delete</a>  <a href="#" class="btn-unapprove">Unapprove</a> 
    <a href="#" class="btn-approve" style="display:none">Approve</a>
  </p>
</div>

There are several ways to do accomplish this task.

You Can use Jquery .closest()

$('.btn-unapprove').click(function(){    
    alert($(this).closest('div.pane.alt').attr('id'));
});

Wokring Example

You Can use Jquery .parents()

$('.btn-unapprove').click(function(){    
    alert($(this).parents('.pane.alt').attr('id'));
});

Wokring Example

You Can use Jquery .parent()

$('.btn-unapprove').click(function(){    
    alert($(this).parent().parent().attr('id'));
});

Working Example

Ishan Jain
  • 8,063
  • 9
  • 48
  • 75
1
This will help you to work done. Before doing this please correct your code and improve like following. In your code you didn't close the <p> tags.

I suggest don't use anchor tags there go with **fake-link** using <span>..

Refer : How to make an anchor tag refer to nothing?

<div class="pane alt" id="a">
<h3>Nick says:</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada</p>
<p>
<a href="#" class="btn-delete">Delete</a>
<a href="#" class="btn-unapprove">Unapprove</a> 
</p>
</div>

jQuery:

jQuery(document).ready(function(){

    jQuery('.btn-unapprove').click(function(){
        alert( jQuery(this).closest('div').attr('id') );
    });

});
Community
  • 1
  • 1
Sachin
  • 48
  • 6
0

Use .closest() in jquery

$('.btn-unapprove').click(function(event){
    event.preventDefault();
    var id = $(this).closest('div.pane').attr('id');
    alert(id);
});
Sudharsan S
  • 15,336
  • 3
  • 31
  • 49
0

You have no ids on the buttons elements. If you set it your code will start working.

To get id of container use the code

var id = $(this).closest('.pane').attr('id');

inside the 'click' function.

santik
  • 346
  • 1
  • 12
0

Demo

Use closest()

 $('.btn-unapprove').click(function(){

        var id = $(this).closest('.pane.alt').attr('id');
        alert(id); 

    });
Balachandran
  • 9,567
  • 1
  • 16
  • 26
0
var id = $(this).parents('.pane').attr('id');
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
Hamid Bahmanabady
  • 665
  • 1
  • 8
  • 20