How to get the type of the DOM element to fix the CSS Selector

Question

Case: $self isn't what I expected and hence I get the undefined . To rewrite the CSS selector to be able to call data on the right element, I would like to know what element I have, how can I do that? Is it my "ul", "li" or "a".. I know there is a typeof() for Javscript and another for jQuery, but they return "object", "Array" ect.. Not what I need here.

$("#ulElementId").on("click", "li a", function (event) {
    var $self = $(this);
    var foo = $self.data("bar"); // undefined
    $self.GetDOMElementType(); // ???
});

Edit:

$("#aId").data("aDataId", "@(Model.aId)");

Solution: Make sure to have the developer tool open (F12) first.

$("#ulElementId").on("click", "li a", function (event) {
    var $self = $(this);
    debugger;
    var foo = $self.data("bar"); // 2
});

Then go to the "Scripts" to see the clicked element. (It's "Object[a #]" in my case) So It's pretty clear now. It was a "a" element. And I can click it and go to it. Turns out foo wasn't undefined but had the right value.. :/

Answer 1

Put in console.log($self); and it should appear in your browser's console. Alternatively you could put a watch on $self and a breakpoint in the browser's debug tool (F12 menu)