I want get the id of the element that is clicked and within a specified class, and want to print the ID.

Here is my JS , I am really new JS , Please help

      $('.wrapinner').click(function(e) {
         $('.wrapinner').css("margin-top","0");
         $('.wrapinner').css("opacity","0.4");
         $(this).css("margin-top","25px");
         $(this).css("opacity","1");
         var r= document.getElementById(this).attributes.toString();
        document.write(r);
    });

I want get the id of the element that is clicked and within a specified class, and want to print the ID.

Here is my JS , I am really new JS , Please help

      $('.wrapinner').click(function(e) {
         $('.wrapinner').css("margin-top","0");
         $('.wrapinner').css("opacity","0.4");
         $(this).css("margin-top","25px");
         $(this).css("opacity","1");
         var r= document.getElementById(this).attributes.toString();
        document.write(r);
    });

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Dec 3, 2013 at 7:23 CleanXCleanX 1,17633 gold badges1717 silver badges2525 bronze badges

Add a ment  | 

10 Answers 10

Sorted by: Reset to default 4

There are two ways to do this:

1) Done without jQuery object (it is faster)

$(".wrapinner").click(function(){
  //Your Code
  var id = this.id;
  document.write(id);
});

OR

2) Done with jQuery object:

$(".wrapinner").click(function(){
  //Your Code
  var id = $(this).attr('id');
  document.write(id);
});

NOTE after jfriend00's ment.

Use document.write() if really needed and is not harmful to your page OR use console.log(). Read Why is document.write considered a "bad practice"?

You can call the native javascript object directly; this.id.

$('.wrapinner').click(function(e) {
     $('.wrapinner').css("margin-top","0").css("opacity","0.4"); // chained these two
     $(this).css("margin-top","25px").css("opacity","1"); // chained these two
     var r = this.id; // this should already reference the correct element.
    document.write(r);
});

Try this way :

$('.wrapinner').click(function(e) {    
  console.log(this.id);
});

You are not passing id to getElementById, rather you are passing the object it self. You can get id of source object of event using this.id not by this.

Change

var r= document.getElementById(this).attributes.toString();

To

var r= document.getElementById(this.id).attributes.toString();

Just write

document.write(this.id)

$(".wrapinner").click(function(){
  var id = this.id
});

Try this example:

<table>
<tbody>
<tr id="CustomerScreen" class="rows"></tr>
<tr id="TraderScreen" class="rows"></tr>
<tr id="DistributorScreen" class="rows"></tr>
</tbody>
</table>
<script>
$('.rows').each(function () {
    var ar = this.id;
    console.log(ar);
});
</script>

You can check this code..

$('.wrapinner').click(function(e) {    
var getID = $(this).attr('id');
alert(getID);
});

Try this:

$('.wrapinner').click(function(e) {
         $('.wrapinner').css("margin-top","0");
         $('.wrapinner').css("opacity","0.4");
         $(this).css("margin-top","25px");
         $(this).css("opacity","1");
         var id = $(this).attr('id');
    });

I am capturing click event on class and then finding its id and class name using parent(). demodemo

$(document).ready(function(){
    $('.class-first ul li, .class-second ul li, .class-third ul li').on('click',function(){
        console.log("child :"+$(this).attr('id') + " Parent:"+$(this).parents().eq(1).attr('class'));
    });
})