1

我有一个包含多个段落的 div（博客文章）。

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

我只想定位仅包含图像的段落并设置text-align:center

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

有什么建议么？

谢谢

4

5 回答 5

2

以下为所有仅包含 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>
于 2012-06-14T12:41:39.987 回答
1

这个例子会对你有所帮助：在 jsFiddle 上演示

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');
        }
    });

});

CSS：

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

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

<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>​
于 2012-06-14T12:17:46.517 回答
0

为此，您可以使用 javascript 并为其编写函数，最好使用 javascript 库 Jquery。当您拥有它的功能时，您可以稍后添加新的段落和图像，而无需编写更多代码。

我会写一个例子，但我没有太多时间。我希望我对你有一点帮助

于 2012-06-14T11:59:49.227 回答
0

CSS是不够的。您可以使用基于父母的 Css 规则，但不能基于孩子。例如，您可以定位出现在段落中的所有图像。这些属性将应用于图像，而不是段落。例子：

p img
{
   /* properties */
}

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

于 2012-06-14T12:07:41.740 回答
0

我不得不在没有 jQuery 的情况下做到这一点，我想出了以下内容：

document.querySelectorAll('p').forEach(function(p) {

    // if there's no image, stop
    if (p.querySelector('img') === null) {
        return;
    }

    // if there's text, stop
    if (p.innerText.trim() !== "") {
        return;
    }

    // otherwise, mark the paragraph
    p.classList.add('img-only');
});

仅在现代浏览器上测试。

于 2019-10-25T09:26:22.537 回答