关于javascript：如何获取$（this）选择器的子节点？

How to get the children of the $(this) selector?

我有一个类似的布局：

1	<img src="...">

并希望使用jquery选择器在单击时选择div中的子img。

为了得到div，我有一个选择器：

$(this)

如何使用选择器获取子img？

jquery构造函数接受名为context的第二个参数，该参数可用于重写选择的上下文。

1	jQuery("img", this);

这与使用.find()类似：

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

如果所需的img只是单击元素的直接后代，则还可以使用.children()：

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

相关讨论

你也可以用

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

它将返回所有属于div的后代的img。

相关讨论

如果你需要得到第一个img，这正好是一个级别，你可以做到。

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

相关讨论

如果DIV标记后紧跟img标记，则还可以使用：

1	$(this).next();

相关讨论

直系子女是

1	$('> .child', this)

相关讨论

您可以像下面这样找到父DIV的所有img元素

1	$(this).find('img') or $(this).children('img')

如果你想要特定的img元素，你可以这样写

1 2	$(this).children('img:nth(n)') // where n is the child place in parent list start from 0 onwards

您的DIV只包含一个img元素。所以下面这个是对的

1
2
3

$(this).find("img").attr("alt")
OR
$(this).children("img").attr("alt")

但是如果您的DIV包含更多的img元素，如下所示

1 2	<img src="test.png" alt="3"> <img src="test.png" alt="4">

然后您就不能使用上面的代码来查找第二个img元素的alt值。所以你可以试试这个：

1
2
3

$(this).find("img:last-child").attr("alt")
OR
$(this).children("img:last-child").attr("alt")

这个例子展示了如何在父对象中找到实际对象的一般概念。可以使用类来区分子对象。这很简单也很有趣。即

1 2	<img class='first' src="test.png" alt="3"> <img class='second' src="test.png" alt="4">

您可以这样做：

1	$(this).find(".first").attr("alt")

更具体的是：

1	$(this).find("img.first").attr("alt")

您可以使用find或children作为上述代码。有关更多信息，请访问children http://api.jquery.com/children/并查找http://api.jquery.com/find/。参见示例http://jsfiddle.net/lalitjs/nx8a6/

在jquery中引用子级的方法。我在下面的jquery中对其进行了总结：

1
2
3
4
5
6

$(this).find("img"); // any img tag child or grandchild etc...
$(this).children("img"); //any img tag child that is direct descendant
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag child that is direct descendant
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

相关讨论

试试这个代码：

1	$(this).children()[0]

相关讨论

在不知道DIV的ID的情况下，我认为您可以这样选择IMG：

1	$("#"+$(this).attr("id")+" img:first")

相关讨论

您可以使用以下任一方法：

1查找()：

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

2个孩子()：

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

jquery的each是一个选项：

1
2
3
4
5
6
7

<img src="testing.png"/>
<img src="testing1.png"/>

$('#test img').each(function(){
console.log($(this).attr('src'));
});

可以使用子selecor引用父级中可用的子元素。

1	$(' > img', this).attr("src");

下面是如果您没有引用$(this)，并且您希望引用div中其他函数提供的img。

1	$('#divid > img').attr("src");

同样，这也应该起作用：

1	$("#id img")

相关讨论

这是一个函数代码，您可以运行它(这是一个简单的演示)。

当您单击该DIV时，您将从一些不同的方法中获得图像，在这种情况下，"this"是DIV。

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
// When you click the DIV, you take it with"this"
$('#my_div').click(function() {
console.info('Initializing the tests..');
console.log('Method #1: '+$(this).children('img'));
console.log('Method #2: '+$(this).find('img'));
// Here, i'm selecting the first ocorrence of <IMG>
console.log('Method #3: '+$(this).find('img:eq(0)'));
});
});

1
2
3
4
5

.the_div{
background-color: yellow;
width: 100%;
height: 200px;
}

1
2
3
4

希望它有帮助！

您的中可能有0到多个标记。

要查找元素，请使用.find()。

为了保证代码的安全，请使用.each()。

同时使用.find()和.each()可防止在0 元素的情况下出现空参考错误，同时还允许处理多个元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// Set the click handler on your div
$("body").off("click","#mydiv").on("click","#mydiv", function() {

// Find the image using.find() and .each()
$(this).find("img").each(function() {

var img = this; //"this" is, now, scoped to the image element

// Do something with the image
$(this).animate({
width: ($(this).width() > 100 ? 100 : $(this).width() + 100) +"px"
}, 500);

});

});

1
2
3
4
5
6
7
8

#mydiv {
text-align: center;
vertical-align: middle;
background-color: #000000;
cursor: pointer;
padding: 50px;

}

1
2
3
4

相关讨论

1
2
3
4
5
6
7
8
9
10

1
2
3
4
5

.the_div{
background-color: yellow;
width: 100%;
height: 200px;
}

1
2
3
4