Question

我已经就地将javascript附加到我的帖子内容中的第一个img标签实例。但根本就没有工作。

<script type="text/javascript">
    $(document).ready(function(){
        var entries = document.querySelectorAll('.post-content');
        for (var i = 0; i < entries.length; i++) {
            var firstImage = $(entries[i].querySelectorAll('img:first')[0]);
            firstImage.addClass('post-first-img');
        }
    });
</script>

我上课时已为上述工作做好准备

.main-content .post-content .post-first-img  { min-width: 890px; }

我已经尝试过这个，但是没有用。

.main-content .post-content img.post-first-img  { min-width: 890px; }

实时网址：http://highways.designlocker.co.uk/hitex-has-innovative-solutions-for-road-marking-and-surfacing/

Answer 1

这是因为普通CSS中没有:first选择器。它只存在于jQuery中，但您将它与querySelectorAll一起使用，它依赖于本机CSS选择器。

删除它应该可行。

但是既然你已经使用了jQuery，为什么不使用

$('.post-content').each(function(){
  $(this).find('img:first').addClass('post-first-img');
});

Answer 2

看起来所有元素都包含在<p>标记中，因此这使得所有只有p标记子元素的图像的索引值为0。您需要做的是定位第一个<p>元素并将该类应用于其第一个图像元素。

有些事情：

$('.post-content p:first-child img:first-of-type').addClass('post-first-img');

Answer 3

您正在将本机DOM方法与jQuery方法混合使用，这可能会导致一些混淆。选择器:first是jQuery的一部分，您正在从DOM函数中使用它。

由于您已经在使用jQuery，我建议您将所有querySelectorAll调用转换为jQuery调用：

$(document).ready(function() {
    var entries = $('.post-content');
    entries.each(function() {
        var firstImage = $(this).find('img:first');
        firstImage.addClass('post-first-img');
    });
});

注意：上面的代码可以缩短，我只是保持原始代码的格式，以便您更好地理解它。

将类分配给第一个图像

3 个答案: