jQuery: How to get the ID of an element.

Say you want to know the ID of an element using jQuery. You can achieve this easily using jQuery’s attr() method:

var currentId = $('#element').attr('id');

But this is fairly useless, because it requires you to already know the ID of the element that you want. Usually you’ll want to find out the ID if you don’t already know it — given a jQuery ‘this‘ object:

var currentId = $(this).attr('id');

This will only work provided that you have a valid jQuery object $(this) that you are working with, eg:

$(document).ready(function() {
  $('input.text').focus(function() {
    $('input.text').removeClass('onFocus'); /* remove focus state from all input elements */
    $(this).addClass('onFocus'); /* add focus state to currently clicked element */
    var currentId = $(this).attr('id');
  });
};

Using the code above, you will now know the ID of the currently focused input element. This can come in handy later on if you want to perform further actions on the element.

—————-
Now playing: Amon Tobin – Precursor (feat. Quadraceptor)
via FoxyTunes

22 responses to “jQuery: How to get the ID of an element.”

  1. Dien says:

    Thanks buddy! Forgot about the brackets.

  2. alon says:

    thanks alot !!
    usefull and short 🙂

  3. Raja says:

    Thank you very much, “attr(’id’);” this one saved my time.

  4. Bob says:

    Exactly what i needed. I was searching for this. Thank you 🙂

  5. Fleischi says:

    That’s what I need!
    Thank you!! 🙂

  6. Superceb says:

    Gotta love jquery, thanks for that info.

  7. José Ramón says:

    Thanks I was on this state of mind when you can’t think different than pure javascript and wanted a 2 second reminder of jquery basics lol

  8. mahesh says:

    Thank u very much
    It’s saved my time.

  9. Tchalvak says:

    Just have to be aware that the element might not have an id, so at any time that id could just be blank or null, whichever .attr() returns.

  10. stuntant says:

    Why not just use:
    var currentId = this.id
    jQuery is awesome but don’t forget your JavaScript basics.

  11. Dylan says:

    Works really well when combined with the new functions such as closest(), for example to find the table row id containing the button that was clicked you can write
    var RowID = $(this).closest(“tr”).attr(‘id’);

    which then makes getting other data in the row much easier. Instead of
    var ErrorDate = $(this).closest(“tr”).find(“td.ErrorDate:first”).text() ;

    you end up with
    var ErrorDate = $(‘#’ + RowID + ” td.ErrorDate:first”).text() ;

  12. EM says:

    @stuntant … um… I’m not javascript expert, but don’t you mean:
    var currentId = this.getAttribute(‘id’)
    ?

  13. Morne says:

    No Em that’s not what he meant 🙂

  14. Richard says:

    Works! Thanks for your tip dude.

  15. Robert (Jamie) Munro says:

    @Dylan Are you really saying that:

    var RowID = $(this).closest(“tr”).attr(‘id’);
    var ErrorDate = $(‘#’ + RowID + ” td.ErrorDate:first”).text() ;

    is easier than:

    var ErrorDate = $(this).closest(“tr”).find(“td.ErrorDate:first”).text();

    If you want to pull more than one piece of data from the row, then, rather than keeping the ID, you shuold keep the jQuery object for the row like:

    var $row = $(this).closest(“tr”);
    var ErrorDate = $row.find(“td.ErrorDate:first”).text();

    @stuntant I agree that using this.id is better in many cases, but it doesn’t work if you want to do somethng like:

    $(this).parent().attr(‘id’);

  16. Anup Dutta says:

    Thanks a lot

  17. mekwall says:

    Why make it hard (and slow) when it’s already simple (and fast)?

    var currentId = this.id;

  18. Raviraj Deora says:

    very helpful..Thanks a lot..

  19. Alex L says:

    I’m trying to do the following:

    photoName = $(“#photoName”).attr(‘var’);
    $(“#” + photoName).remove();

    <div id="”>

    <div id="photoName" var="”>

    can’t make it work.

  20. astaza says:

    hello how to get and random id for element not have id
    thank you

  21. Vasim Padhiyar says:

    how to get id of all same class name element ?

    for example :

    i want to find id of all div from its classname…

    thnaks

    Vasim Padhiyar