Get Selector from a JQuery object

Question

For Example, this will give me:

 console.log($(".smartgridview-normal").selector)
 //result is  '.smartgridview-normal'.

enter image description here

My code is :

    $( '.smartgridview-normal th' ).live( 'dblclick', function () {
        var optimalWidth = parseFloat( $( this ).attr( 'data-width' ) );
        console.log( $(this).selector );// At this point I need the selector
        $(this).addClass('selected');
    } );

My Log is giving me an empty string. There is no selector for 'this' object. Is there any way to get the selector of the element which 'this' is pointing to?

Thanks for your time.

Your screenshot is very small. can you post a bigger screenshot or copy the code and paste it? — Muthu Kumaran, Dec 03 '12 at 06:04
Which selector you are looking for with `$(this)`? The one that was used to attach the handler? — John Dvorak, Dec 03 '12 at 06:07
I'm looking for the selector of the current element that caused the event. In my case 'this' will point to the current element. — Akhil Sekharan, Dec 03 '12 at 06:12
@AkhilSekharan _which_ selector? The one that was used to attach the handler? Any selector that selects only that element? — John Dvorak, Dec 03 '12 at 06:13
If an element has an ID, then `'#'+this.id` is one possible selector for that element. — John Dvorak, Dec 03 '12 at 06:15
I don't think there is any such thing as "selector of the current element". You only know that your current element matches the initial selector. Except of course if your current element has an id (or you give it an id). — Christophe, Dec 03 '12 at 06:17
Better question is - why do you need the selector? Beware the [XY problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem). — Amadan, Dec 03 '12 at 06:18
To give you an analogy of what you're asking: Say there's a guy called John Smith. His kids call him Dad, or Daddy. His wife, darling, sweetie or John. His mother, my Johnny, or sometimes John Tiberius Smith. When you call him, you know what you called him. But when you meet him in the city waiting to meet someone, you have no idea what name was used to summon him there. All you know is, he's John Smith. `this` is John Smith himself; `$('.foo th')` is the phone conversation that brought him to that intersection. — Amadan, Dec 03 '12 at 06:29
@Amadan. I got it. Thanks. So in short there is no jquery selector for this pointer. Thanks. — Akhil Sekharan, Dec 03 '12 at 06:33
I think you should check out http://stackoverflow.com/questions/2420970/how-can-i-get-selector-from-jquery-object: it's an older question, maybe "the historical one" about this stuff. — reallynice, Nov 26 '13 at 14:06

score 2 · Accepted Answer · answered Dec 03 '12 at 06:04

Oh, I see where your problem is. $(this) is not constructed using a selector, but rather by directly wrapping a DOM element, so it does not carry it anywhere. You can get the original selector obviously by doing $('.smartgridview-normal th').selector; but there's a big difference between $('.smartgridview-normal th') and $(this).

Enrico · Answer 2 · 2012-12-03T06:35:01.290

2

As Amadan said, inside the click handler this refers to the element, not the jQuery object

It's not perfect, but you could cache the jQuery object

var elements = $("#mySelector")
$elements.on("dblclick", function(event){
    console.log($elements.selector);
});

Fiddle for testing

edited Dec 03 '12 at 06:35

answered Dec 03 '12 at 06:19

Enrico

10,377
8
44
55

What's the point of `$(elements)` when `elements` is already a jQuery object? – John Dvorak Dec 03 '12 at 06:20
1

@JanDvorak Visual consistency. Similar to the consistency of your pedantry :-P – Enrico Dec 03 '12 at 06:22
2

You could name the variable `$elements`. I think it's cleaner than rewrapping it unneccessarily. – John Dvorak Dec 03 '12 at 06:25
@JanDvorak You are absolutely correct. It was just force of habit. Is there a signicant reason to prefix the variable with a `$`? Or is it purely cosmetic? – Enrico Dec 03 '12 at 06:29
1

@Enrico: good habit to distinguish wrapped elements from unwrapped. No formal reasons, but increases readability and maintainability. (Now if only I could remember to do it consistently :D ) – Amadan Dec 03 '12 at 06:31

score 1 · Answer 3 · answered Dec 03 '12 at 06:31

1

To elaborate on my comment, "#"+this.id is the best you can hope for if the element has an id. If not, the only information you have is that the element belongs to your original selection '.smartgridview-normal th'.

You could always add the id yourself within the code (for example unique id based on the current date and time).

answered Dec 03 '12 at 06:31

Christophe

27,383
28
97
140

This is JavaScript, not Perl/PHP :) We don't hold with dot concatenation here :D – Amadan Dec 03 '12 at 06:32

score -2 · Answer 4 · answered Dec 03 '12 at 06:15

-2

Try using nodeName instead of selector,

var selector = $(this)[0].nodeName;

Or,

var selector = this.nodeName;

answered Dec 03 '12 at 06:15

Muthu Kumaran

17,682
5
47
70

Do you realise `$(this)[0] === this`? – John Dvorak Dec 03 '12 at 06:16

score -2 · Answer 5 · answered Dec 03 '12 at 06:36

-2

Perhaps set it to a variable first?

var sel = "answer";
$("#"+sel).on("dblclick", function(event){
   console.log("Current selector is "+sel);
});

answered Dec 03 '12 at 06:36

DACrosby

11,116
3
39
51

Get Selector from a JQuery object

5 Answers5