target img类名

Question

我知道我可以写：

 $('.2020').css("padding", "20px");

但我怎么写它：

 $('.a').children('img').children('.2020').css("padding", "20px");

 <div class"a">
 <img class="2020" src="img/swatch/2020.jpg" >
 <img class="2021" src="img/swatch/2021.jpg" >
 <img class="2022" src="img/swatch/2022.jpg" >
 </div>

http://jsfiddle.net/ssRYk/

Answer 1

您的选择器$('.a').children('img').children('.2020')尝试查找类2020的元素，该元素位于img元素内，该元素位于具有类a的元素内。

实施例

<div class="a">
    <img src="img/swatch/2020.jpg" >
        <span class="2020"></span>
    </img>
</div>

但在你的情况下，img元素具有class属性，因此你有两个选择连接img和.2020选择器，如.children('img.2020')或找到{{ 1}}使用img的元素和使用.children('img')

在该集合中使用类的过滤元素

如果你想保留相同的结构，那么你可以

.filter('.2020')

演示：Fiddle

Answer 2

您的小提琴和上面的代码都有错误，错过了=

中的class="a"

您要查找具有类a的所有元素。比寻找图像的孩子。现在查找具有类2021的子项的图像。由于图像不能有子项，因此该代码永远不会返回任何内容。

您可以将两个子语句与一个选择器组合，而不是执行多个操作。

$('.a').children('img.2021').css("padding", "5px");

你也可以在一个选择器中没有孩子的情况下编写它

$('.a > img.2021').css("padding", "5px");

替代方案是过滤。