使用类名按ID获取元素

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

Answer 1

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

Answer 2

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

Answer 3

Try this way :

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

Answer 4

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

Answer 5

写吧

document.write(this.id)

Answer 6

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

Answer 7

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

Answer 8

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>

Answer 9

You can check this code..

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

Answer 10

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

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