Question

I have an interesting selector statement:

$("span#dateofbirth").bind('click', function() {
  $("span#dateofbirth>form>input.inplace_field").blur();
  $("span#dateofbirth>form>input.inplace_field").removeClass("inplace_value");
  $("span#dateofbirth>form>input.inplace_field").datepicker({dateFormat:'yy-mm-dd'});
  $("span#dateofbirth>form>input.inplace_field").addClass("inplace_value");
  $("span#dateofbirth>form>input.inplace_field").focus();
});

It was actually inserted by someone else, to make the jQuery UI datepicker work with an Edit-in-Place plugin. It appears to be more of a hack/band-aid than anything. But it works.

I want to continue working with it, but I’d like to modify it to be more global for any element with a Date.

So, I gave the spans a class of .datepicker

But, it doesn’t quite work, since the bind prefers the specific ID, to localize to that element.

Is there a way around this, perhaps using the $(this), in conjunction with the rest of the selector statement?

Perhaps something along the line of?

$("span.datepicker").bind('click', function() { 

  $(this+">form>input.inplace_field").blur();

});

Answer 1

Use .find()

$(this).find(">form>input.inplace_field")

OR

$(">form>input.inplace_field" , this)  // Provide a context to search in

JS

$("span#dateofbirth").bind('click', function() {
  $(">form>input.inplace_field" , this).blur()
          .removeClass("inplace_value")
          .datepicker({dateFormat:'yy-mm-dd'})
          .addClass("inplace_value")
          .focus();
});

You should chain or cache the selectors to reduce the times you query the DOM.