jquery - 是否可以使用 '>' 选择 'this' 对象的子对象？

Question

我最初面临的问题是这样的:

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

我做了一些研究并发现了这篇文章: How to get the children of the $(this) selector?

这两个参数的方式实际上对我有用

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

现在我的问题是，有没有什么方法可以选择这个span元素，

在 $() 中使用单个参数？ (并且不使用 find()、child() 等方法)

比如，有什么事情/方法可以做 $(this > childElement) 吗？

感谢您的帮助

Answer 1

为了直接回答您的问题，没有单一的参数方法可以仅搜索 this 的子级。 jQuery 中的元素。这是因为 jQuery 的默认上下文是整个文档，因此要更改它，除了选择器之外，您还必须使用一些其他代码。

此外，DOM 元素本身(在示例中的 this 变量中)无法进入选择器，因为选择器是一个字符串，而 DOM 元素没有任何方式在选择器字符串中表达它。因此，您必须使用额外的参数来限定选择器的搜索范围，使其小于文档。

因此，为了限制选择器搜索的范围，您可以使用听起来您可能已经知道的选项:

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

如果我想要任何后代，我自己更喜欢使用 .find()因为我觉得代码更直接可读。因此，为了满足您的特殊需要，我会使用这个:

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

或者，如果只有直系 child :

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

<小时/>

此外，您的.change()代码应该绑定(bind)到实际支持该事件的元素，该元素类似于 <select>或<input> ，不是常规<div> .