2

I have done a simple selector for example:

$('div').eq(0).selector;// returns     "div.slice(0,1)"
$($('div').eq(0).selector);// would not work... 

should the eq(0) not had been there it would work as it wont have the slice but a proper usable selector.

My problem is that, I wonder that using .selector, is not very helpful, and I have not tried other filters etc...

$('div').children().selector// returns "div.children()"

I am using jQuery 1.7.1, I really don't see what the use of this .selector is for when it returns something that does not even work.

I was trying to make a plugin, but I thought of using the .selector to get elements added in the future (on the fly).

UPDATE

$.fn.myplugin(function (){
  $(this.selector)//select future elements...
})

Or is there another approach to this?

Val
  • 17,336
  • 23
  • 95
  • 144
  • 1
    to define "helpful", you must first define what you're trying to do... – Alnitak Aug 17 '12 at 09:12
  • `I was trying to make a plugin, but I thought of using the .selector to get elements added in the future (on the fly).` I thought this does explain what I am trying to do... – Val Aug 17 '12 at 09:16
  • no, that doesn't give me _any_ hint about why you need the `.selector` value. Why does this plugin need "future" elements? A jQuery object has no idea about elements chained later, only the ones chained before it (which `.end()` needs so it can unwind that stack). – Alnitak Aug 17 '12 at 09:20
  • ok, maybe the code should give you a sort of picture for you – Val Aug 17 '12 at 09:22
  • nope, that still doesn't help. `.selector` doesn't give you _future_ elements, it just tells you what selector (or function chain) was used to get the _current_ elements. – Alnitak Aug 17 '12 at 09:24
  • someone walk up on the wrong side of the bed (very negative), `$(this.selector)` would select return a new stack, and it can be used with `setInterval` to check constantly. – Val Aug 17 '12 at 09:26
  • no, that's my point. `$(this.selector)` will _at best_ return a new set containing the original set of elements. Anything you add later won't be there. – Alnitak Aug 17 '12 at 09:54
  • http://jsfiddle.net/aA9hQ/ Please use this link and click on the body to demonstrate what I am talking about, I just dont understand why you keep insisting? – Val Aug 17 '12 at 10:09
  • OK, so you're trying to implement lazy (re)evaluation of the selector. Can you explain _why_ ? – Alnitak Aug 17 '12 at 12:48

3 Answers3

1

If you are making a plugin, what you would typically do is to provide an option with the selector to be used to refresh you list of elements. This option can also be exposed to the end-user so it can be customized.

$('div').myPlugin({
    elements: 'ul > li'
});

If the need to detect future elements to bind events, use event delegation using .on().

Long story short, you actually define an event handler on a container. The event will bubble up to the container and be executed if the element originally receiving the event matches the specified selector.

<div id="container">
    <span>Some text</span>
    <button>Click me</button>
</div>

$('#container').on('click', 'button', function() { ... });

This will bind one handler on the element #container and the event handler will be executed if an element <button> is clicked... but also for any <button> element added to the DOM afterwards.

Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
  • You mean to add an extra option, to select future events? – Val Aug 17 '12 at 09:04
  • I think your code will be more flexible this way. jQuery UI uses it as well for instance (see the [items](http://jqueryui.com/demos/sortable/#option-items) option of the Sortable plugin for instance). To handle events for future elements, use event delegation, as I explained. – Didier Ghys Aug 17 '12 at 09:20
0

Use selector expressions

$('div:eq(0)').selector; // returns 'div:eq(0)'

More here.

  • I know that would work, however since this would be used on a plugin, it's not helpful forcing a user to use expressions. which would limit the plugin, it's not very practical – Val Aug 17 '12 at 09:07
0

You would have to listen for DOM changes, for that see this answer.

OR

You could check for changes to your matched root element every n seconds using a setInterval.

Community
  • 1
  • 1
Robin Maben
  • 22,194
  • 16
  • 64
  • 99