如何获取 $(this) 选择器的子元素

技术背景

在前端开发中，使用 jQuery 库时，经常需要获取某个元素的子元素。$(this) 选择器通常用于表示当前操作的元素，而获取其特定的子元素是常见需求，比如获取某个 div 中的 img 标签。

实现步骤

使用 jQuery 构造函数的 context 参数

jQuery("img", this);

此方法等同于使用 .find() 方法：

jQuery(this).find("img");

使用 .find() 方法

该方法会返回所有匹配选择器的后代元素。

$(this).find('img');

使用 .children() 方法

如果只需要直接子元素，可以使用此方法。

$(this).children('img');

获取特定位置的子元素

获取第一个直接子元素 img：

$(this).children("img:first");

获取第 n 个直接子元素 img（n 从 0 开始）：

$(this).children('img:nth(n)');

获取最后一个直接子元素 img：

$(this).find("img:last-child");
// 或者
$(this).children("img:last-child");

使用类名选择子元素

$(this).find(".first");
// 更具体的选择
$(this).find("img.first");

使用 next() 方法

如果 DIV 标签后面紧接着是 IMG 标签，可以使用此方法。

$(this).next();

使用原生 JavaScript 方法

如果有多个 img 标签：

this.querySelectorAll("img");

如果只有一个 img 标签：

this.querySelector("img");

核心代码

示例代码

$(document).ready(function() {
    // 当点击 DIV 时
    $('#my_div').click(function() {
        console.info('Initializing the tests..');
        console.log('Method #1: '+$(this).children('img'));
        console.log('Method #2: '+$(this).find('img'));
        // 选择第一个 <IMG> 元素
        console.log('Method #3: '+$(this).find('img:eq(0)'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_div" class="the_div">
    <img src="...">
</div>

使用 .each() 方法处理多个子元素

// 设置 div 的点击事件处理程序
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {
    // 使用 .find() 和 .each() 查找并处理图片
    $(this).find("img").each(function() {
        var img = this;  // "this" 现在作用于图片元素
        // 对图片进行操作
        $(this).animate({
            width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
        }, 500);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
    <img src="" width="100" height="100"/>
</div>

最佳实践

• 当需要查找所有后代元素时，使用 .find() 方法。
• 当只需要直接子元素时，使用 .children() 方法。
• 为了避免空引用错误，在处理可能不存在或有多个子元素的情况时，结合使用 .find() 和 .each() 方法。

常见问题

当 div 中有多个 img 元素时，如何获取特定 img 的属性

可以使用 :nth-child、:first-child、:last-child 等伪类选择器来定位特定的 img 元素，然后使用 .attr() 方法获取其属性。

如何避免空引用错误

使用 .find() 和 .each() 方法结合，这样即使没有匹配的元素，也不会出现空引用错误，同时可以处理多个匹配元素。