是否可以使用">"来选择"this"对象的子对象？

Question

我面临的原始问题是这样的：

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

我做了一些研究，发现了这个帖子：如何获取$(this)选择器的子项？

两个参数的方式实际上适用于我

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

现在我的问题是，有没有任何方法可以选择这个跨度元素，

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

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

感谢的帮助

Answer 1

要直接回答您的问题，在jQuery中没有只搜索this元素的子元素的单参数方法。这是因为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());

或者，如果只是直接的孩子：

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

---

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

Answer 2

您可以使用find()：

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

如果您不想使用find，请使用：

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

Answer 3

确切的替代品是

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

或尝试(未测试)

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