1

The original problem I face is like this:

$('#setting-box > div').change(function(){
      // Would like to select current div's span child and do something
}

I have done some research and found this post: How to get the children of the $(this) selector?

The two parameters way actually works for me

$('span', this).html($('input', this).val());

And now my question is, is there any method to select this span element,

using single parameter in the $()? (and not using method like find(), child(), etc)

Like, is there any thing / way to do $(this > childElement) ?

Thanks for any help

Community
  • 1
  • 1
shole
  • 4,046
  • 2
  • 29
  • 69
  • 1
    You are using wrong method that is change method is not to be bound to div tag but should be bound to input tags – Bhojendra Rauniyar Feb 19 '14 at 04:56
  • Thanks for reminding, but let's replace the change() to click() or something else, the question should be still valid...what I really want to know is in generally speaking, is it possible to select 'this' child / descendant using something like $(this > childElement)? – shole Feb 19 '14 at 05:05

3 Answers3

3

You can use find():

$('#setting-box > div').change(function(){
    $(this).find('span').html($('input', this).val());
});

if you don't want to use find then use:

$('#setting-box > div').change(function(){
    $('span', this).html($('input', this).val());
});
Felix
  • 37,892
  • 8
  • 43
  • 55
3

To answer your question directly, there is no single argument way to just search children of the this element in jQuery. That's because the default context for jQuery is the entire document so to change that, you HAVE to use some additional code besides just the selector.

Further, a DOM element itself (in the this variable in your example) can't go into a selector because the selector is a string and a DOM element doesn't have any way to express it in a selector string. So, you have to use an extra argument to qualify what scope is searched for the selector to something smaller than just the document.

So, to restrict the scope of the selector search, that leaves you with the options that it sounds like you may already know about:

$(this).find(selector)          // any descendant
$(selector, this)               // any descendant
$(this).children(selector)      // only look at direct children

If I want any descendant, I myself prefer to use .find() because I think the code is more directly readable. So, for your particular need, I'd use this:

var self = $(this);
self.find("span").html(self.find("input").val());

Or, if only direct children:

var self = $(this);
self.children("span").html(self.children("input").val());

In addition, your .change() code should be bound to an element that actually supports that event which would be something like a <select> or <input>, not a regular <div>.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • Perfect answer! It's exactly what I want to know as a new jquery learner! Thanks mate!! :) – shole Feb 19 '14 at 05:34
1

the exact replacement is

$(this).children('span').html($('input', this).val());

or try (not tested)

$('> span', this).html($('input', this).val());
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Arun P Johny
  • 384,651
  • 66
  • 527
  • 531