What is the easiest way to get the id of a child element?

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>

it's best to make snippets so people can copy your example and return a live one as well. — A. L, Apr 18 '17 at 13:06

score 2 · Answer 1 · edited Apr 18 '17 at 13:09

2

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

edited Apr 18 '17 at 13:09

Himanshu dua

2,496
1
20
27

answered Apr 18 '17 at 13:04

l.varga

851
6
14

score 2 · Answer 2 · edited May 23 '17 at 12:32

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

score 1 · Accepted Answer · answered Apr 18 '17 at 13:17

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>

score 0 · Answer 4 · answered Apr 18 '17 at 13:10

0

you can use it like this.

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

answered Apr 18 '17 at 13:10

Learner

23
5

Jorge Fuentes González · Answer 5 · 2017-04-18T13:17:42.150

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.

What is the easiest way to get the id of a child element?

5 Answers5