Javascript 仅包含图像的目标段落

我有一个包含多个段落的div（博客帖子）

其中一些包含文本、其他文本+图像和其他仅包含图像

我希望只针对只包含图像的段落，并设置

text align:center

这是否可能只使用css，还是需要js

有什么建议吗

---

感谢要做到这一点，您可以使用javascript并为其编写函数，最好使用javascript库Jquery。当你有了一个函数，你可以在以后添加新的段落和图像，而不需要写更多的代码

---

我本想写一个例子，但我没有太多时间。我希望我帮了你一点忙，Css是不够的。您可以使用基于父对象的Css规则，但不能基于子对象。例如，您可以将显示在段落内的所有图像作为目标。这些属性将应用于图像，而不是段落。例如：

p img
{
   /* properties */
}

---

选项仍然是Javascript或服务器端，例如，您可以根据内容（.imageOnly或.mixedContent）为段落指定特定的类名。

此示例将帮助您：

jQuery代码：

$(function() {
    var divs = $('.blog-post > div');

    $.each(divs, function(i, div) {
        /* cache variable */
        var $div = $(div);
        if ( !($div.find('p')[0]) ) { /* if there are no one p tag inside div */
            $div.addClass('only-images');
        }
    });

});

.blog-post > .only-images {
    background-color: red; /* color is demo only */
}

CSS:

$(function() {
    var divs = $('.blog-post > div');

    $.each(divs, function(i, div) {
        /* cache variable */
        var $div = $(div);
        if ( !($div.find('p')[0]) ) { /* if there are no one p tag inside div */
            $div.addClass('only-images');
        }
    });

});

.blog-post > .only-images {
    background-color: red; /* color is demo only */
}

因此，我的示例将仅将类添加到第三个div中，该div仅包含本示例中的图像HTML标记：

<div class="blog-post">
    <div>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
        <p>some text</p>
    </div>
    <div>
        <p>some text</p>
        <img src="//placekitten.com/g/100/100" alt="" />
    </div>
    <div> <!-- only this div would be applied class `only-images` customizable by css  -->
        <img src="//placekitten.com/g/100/100" alt="" />
        <img src="//placekitten.com/g/100/100" alt="" />
    </div>
</div>​

一些文本

一些文本

一些文本

一些文本

一些文本

​

以下内容向所有仅包含img标记和空白的p标记添加了一个特殊的CSS类：

$('.blog-post p').each(function(i){          // For each paragraph
    if ( ($(this).find('img').length) &&     // If there's an image
         (!$.trim($(this).text()).length))   // and there's no text
    {
        $(this).addClass('imgOnly');         // Add a special CSS class
    }
});

trim（）

函数与

text（）

一起使用，以确定文本是否只包含空格

样本内容：

<div class="blog-post">
    <p>Text</p>
    <p><span>Text</span></p>
    <p><img/></p>                   <!-- CSS class will be added -->
    <p>Text <img/></p>
    <p><span>Text</span><img/></p>
    <p><img/> Text <img/></p>
    <p><img/><img/></p>             <!-- CSS class will be added -->
    <p><img/> <img/></p>            <!-- CSS class will be added -->
</div>

正文

正文


正文

正文

正文

我不得不在没有jQuery的情况下完成这项工作，我想到了以下几点：

document.querySelectorAll（'p'）.forEach（函数（p）{
//如果没有图像，请停止
if（p.querySelector（'img'）==null）{
返回；
}
//如果有文本，请停止
如果（p.innerText.trim（）！=“”）{
返回；
}
//否则，请标记该段落
p、 添加（'img-only'）；
});

---

仅在现代浏览器上测试。

jquery在没有css的情况下听起来还可以posibility@VladimirStarkov谢谢你的例子。您的目标是仅包含图像的div。我想针对只包含图像而不包含文本的段落。我的解决方案也很有效。看见