Get element by ID using class name

Question

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

score 4 · Accepted Answer · edited May 23 '17 at 12:13

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

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

edited May 23 '17 at 12:13

Community

1
1

answered Dec 03 '13 at 07:26

JERRY-the chuha

592
1
4
16

1

Please use `console.log()`, not `document.write()` because `document.write()` will clear the entire document. – jfriend00 Dec 03 '13 at 07:42

score 3 · Answer 2 · answered Dec 03 '13 at 07:26

3

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

answered Dec 03 '13 at 07:26

Joel Peltonen

13,025
6
64
100

Eeeck. Don't use `document.write()` because that will clear the entire document. If it's just for debugging, use console.log() – jfriend00 Dec 03 '13 at 07:41
@jfriend00, I used `document.write()` because the OP used it in their function and I didn't want to guess what they actually wanted to do :) – Joel Peltonen Dec 03 '13 at 10:33

score 1 · Answer 3 · answered Dec 03 '13 at 07:24

1

Try this way :

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

answered Dec 03 '13 at 07:24

Ankit Tyagi

2,381
10
19

score 0 · Answer 4 · answered Dec 03 '13 at 07:24

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();

score 0 · Answer 5 · answered Dec 03 '13 at 07:26

0

Just write

document.write(this.id)

answered Dec 03 '13 at 07:26

tewathia

6,890
3
22
27

I'm not advising him to use `document.write`. He's already using it in his code. The point of my answer was to mention that `this.id` would do the trick. – tewathia Dec 03 '13 at 07:32

score 0 · Answer 6 · answered Dec 03 '13 at 07:26

0

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

answered Dec 03 '13 at 07:26

akash

2,117
4
21
32

Ringo · Answer 7 · 2013-12-03T07:42:43.600

0

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

edited Dec 03 '13 at 07:42

answered Dec 03 '13 at 07:27

Ringo

3,795
3
22
37

Eeeck. Don't use `document.write()` because that will clear the entire document. If it's just for debugging, use `console.log()`. – jfriend00 Dec 03 '13 at 07:41
sorry! I just follow the owner! – Ringo Dec 03 '13 at 07:42

score 0 · Answer 8 · answered Dec 03 '13 at 07:28

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>

score 0 · Answer 9 · answered Dec 03 '13 at 07:31

0

You can check this code..

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

answered Dec 03 '13 at 07:31

Pradeep Pansari

1,287
6
10

score 0 · Answer 10 · answered Dec 04 '13 at 10:44

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

Get element by ID using class name

10 Answers10