javascript - 直接查询的对象和查询其子对象之一的对象有什么区别？

Question

当我在以下对象上添加类时，一切都很好:

$('.select').on('click', function() {
    $(this).addClass('active');
});

但是当我尝试向子级添加类时，出现错误:

$('.select').on('click', function() { 
    $(this).find('.list')[0].addClass('active'); 
});

根据我的研究，我了解到某些对象具有可以调用它们的特定方法。所以一定有区别

$(this)

和

$(this).find('.list')[0]

但我不知道有什么区别，也不知道如何找出来。

Answer 1

区别在于，$(this)是一个jquery对象，而$(this).find('.list')[0]是一个DOM元素，并且没有 jQuery 提供的函数和方法。

因为调用 $(this).find('.list') 会给你一个 nodeList 并且当你调用 [0]您将从该列表中获得第一个节点对象，并且节点或 DOM 元素与 jquery 对象不同，因为 jQuery 用其实用方法和属性包装了 DOM 元素。

所以您需要做的就是将此 DOM 元素转换为 jQuery 对象，以便您可以对其调用 jQuery 方法:

$($(this).find('.list')[0])