Question

我试图通过jQuery选择一个元素，但选择中的一个元素是可选的。所以我有这样的事情：

$('div.myClass span a>img')

在我的场景中，a元素是可选元素。它可能存在也可能不存在于DOM中。

当然，我可以用包含a的一行再次写出整行，但这看起来很冗长：

$('div.myClass span a>img').css('opacity', 0.5);
$('div.myClass span img').css('opacity', 0.5);

是否可以在jQuery选择器路径中将a元素定义为可选的？

Answer 1

如果您想要专门目标仅图片中的图片，则只需要a >。否则，div.myClass span img将定位跨度内的任何图像....无论是否存在锚标记。

$('div.myClass span a > img');

<div class="myClass">
    <span>
        <a href="#"><img src="THIS IMAGE IS TARGETED" /></a> 
        <img src="BUT THIS IMAGE IS NOT" />
    </span>
</div>

$('div.myClass span img');

<div class="myClass">
    <span>
        <a href="#"><img src="THIS IMAGE IS TARGETED" /></a> 
        <img src="THIS IMAGE IS ALSO TARGETED" />
    </span>
</div>

$('div.myClass span img').not('a > img');

<div class="myClass">
    <span>
        <a href="#"><img src="THIS IMAGE IS ** NOT ** TARGETED" /></a> 
        <img src="THIS IMAGE IS TARGETED" />
    </span>
</div>

Answer 2

你不能创建一个可选的元素选择器（除了使用*，但这不是一个好主意）。相反，您可以将选择器组合到单个jQuery对象中，如下所示：

$('div.myClass span a>img, div.myClass span img').css('opacity', 0.5);

但请注意，如果第二个选择器对您的方案有效，那么>选择器无论如何都是多余的。

Answer 3

您可以使用上下文并将选择器置于其后面，如：

$('a > img, img', 'div.myClass span').css('opacity', 0.5);

在您的情况下，您只需要img，因为a > img会选择相同的图片：

$('img', 'div.myClass span').css('opacity', 0.5);

Answer 4

仅限使用

$('div.myClass span img').css('opacity', 0.5);

它将按您的要求运作。

Answer 5

您也可以剪切表达式，然后使用find

$('div.myClass span').find('a>img, img').css('opacity', 0.5);

在jQuery选择器中定义一个元素作为可选项？

5 个答案: