[Javascript]Javascript编程开发中如何使用jQuery获取$(this)选择器的子节点?

Javascript 作者: Rector 37阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

问题描述

jQueryjavascript开发中,当前有类似如下的HTML结构代码:

<div id="..."><img src="..."></div>

现在想使用jQuery选择器来得到当点击div元素时div里的img子节点。

当点击div元素时,我们可以使用如下的选择器来获取到div,如下:

$(this)

但要获取到div元素中的img子节点,应该怎样实现呢?

方案一

jQuery构造函数接受第二个名为context的参数,可用于覆盖选择的上下文。因此,可像如下这样使用:

jQuery("img",this);

这种方式类似.find()方法的使用,如下:

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

此外,如果img元素是div元素的直接后代节点,我们还可以使用.children()方法来获取,如下:

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

方案二

使用.find()方法来获取,如下:

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

注意:此方法会返回div元素中所有的匹配的img子节点元素集合。

方案三

使用.children()方法来获取,如果只需要返回第一个匹配的img元素,还可以添加选择器的修饰,如下:

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

方案四

如果imgdiv的直接子节点,则可以:

$('> .child',this)[0];

或者

$(this).children()[0]

方案五

$(this).find("img"); // 返回所有的子节点或者子孙节点的img集合 
$(this).children("img"); // 返回所有直接后代(子节点)的img集合
$(this).find("img:first") // 返回所有的子节点或者子孙节点的第一个img的集合
$(this).children("img:first") // 返回直接后代(子节点)的第一个img元素
$(this).children("img:nth-child(1)") // 返回直接后代(子节点)的第一个img元素
$(this).next(); // 返回直接后代(子节点)的第一个img元素

阅读了该文章的人还浏览了...

本文永久链接码友网 » [Javascript]Javascript编程开发中如何使用jQuery获取$(this)选择器的子节点?

发布于: 2018-05-31 18:56:41
分享扩散:

文章评论

获取验证码