Question

我有一些示例帖子标记：

<article class="post">
    <p>Some text.</p>
    <p>
        <a href="#"><img src="#"></a>
        <a href="#"><img src="#"></a>
        <a href="#"><img src="#"></a> <!-- TARGET ME (LAST) -->
    </p>
    <p>Some text. Some more text <a href="#">with link</a></p>
    <p>
        <a href="#"><img src="#"></a> <!-- TARGET ME (LAST) -->
    </p>
    <p>Some text. Some more text <a href="#">with link</a></p>
</article>

上面的小提琴可以在这里看到：http://jsfiddle.net/alecrust/4TCyM/

问题：如何在不更改此标记的情况下定位每个集合中的最后一个图像（以HTML注释显示）？

我认为需要JavaScript，因为我无法想到任何CSS解决方案。我无法使用img:last-child，因为这会针对上述标记中的每个图片。我无法使用a:last-child img，因为这不会针对上述标记中的任何内容。

Answer 1

这将使用jQuery的find()：

来实现

$(".post p").find("img:last")

或者，如果您必须检查它们是否在a标记内，您可以执行以下操作：

$(".post p").find("a img:last")

此外，只需仔细检查，您的原件也会起作用：

$("a:last-child img");

DEMO

Answer 2

$('a:last-child').children('img')应该做到这一点。找到每个集合中的最后一个锚点，然后使用>，.children()或.find()深入了解img标记。

Answer 3

使用:last-of-type！

p img:last-of-type { ... }

或在锚点而不是图像上使用:last-child：

p a:last-child img { ... }

不需要JS;）

Answer 4

$("a:last-child").has("img").css("background", "red");

http://jsfiddle.net/4TCyM/1/

Answer 5

$( "article.post p a:last-child img" )

http://jsfiddle.net/kboucher/fUfmY/

用JS定位最后一个孩子

5 个答案:

DEMO