获取子元素ID的最简单方法是什么？

Question

I have an up-vote button that has an child element with a dynamic id. How can I fetch the id of that child element?

I'm trying to add a voting feature to a blog site, and each blog has a unique ID that I need for the ajax call to log the vote in the database and also to update the vote tally in the html.

 $(".plus").click(function() { var myvar = $(".plus").find("h4"); console.log(myvar); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='plus'> <h4>up</h4> <h3 id='{{blog.id}}'>0</h3> </button> 

Answer 1

Provided you want to get the id of h3 element and print it out in myvar Check this link

$(".plus").click(function(){
     var myvar = $( ".plus" ).find( "h3" ).attr("id");
     console.log(myvar);
 });

Answer 2

jQuery .children() will be the best option:-

 $(".plus").click(function(){ var myvar = $( ".plus" ).children( "h3" ).attr('id'); console.log(myvar); var myvar1 = $( ".plus" ).children( "h4" ).attr('id'); console.log(myvar1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='plus'> <h4 id="h4_id">up</h4> <h3 id='h3_id'>0</h3> </button> 

Why .children() is best in your case :- https://stackoverflow.com/a/648014/4248328

Answer 3

Although you can use this to get the child element's id:

$(".plus").click(function() {
    var myvar = $(this).find("h3")[0].id;
    console.log(myvar);
});

Yet i feel that if you change your markup a little that can also be possible with some data-* attributes:

 $('.plus').click(function(){ // jquery version var blogId = $(this).data('blogId'); console.log("jq .data() version::::", blogId); // js version var blgId = this.dataset.blogId; console.log("js .dataset version::::", blgId); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='plus' data-blog-id='{{blog.id}}'> <h4>up</h4> <h3 id='{{blog.id}}'>0</h3> </button> 

Answer 4

you can use it like this.

$(".plus").click(function() {
 var myvar = $(this).find("h3").attr("id");
 alert(myvar);
});

Answer 5

If you have multiple .plus items and want to get the id of each one on click, you can use the this context.

 $(".plus").click(function() { var myvar = $(this).find("h4").text(); var myid = $(this).find("h3").attr("id"); console.log(myvar, myid); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class='plus'> <h4>up</h4> <h3 id='id_1'>0</h3> </button> <button class='plus'> <h4>down</h4> <h3 id='id_2'>0</h3> </button> 

With this code, when you click a .plus button, it will look itself for the value of the <h4> snippet and the id of the <h3> .

Using a $(".plus") selector instead of this inside the click function will select ALL the buttons in the page when you click one, and the attr() method will return only the first ID instead of the current one.