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マークアップで画像のみを含む 3 番目の 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

Cssでは不十分です。親に基づいてCssルールを使用できますが、子に基づいて使用することはできません。たとえば、段落内に表示されるすべての画像をターゲットにすることができます。プロパティは、段落ではなく画像に適用されます。例：

p img
{
   /* properties */
}

オプションはJavascriptまたはサーバー側のままです。たとえば、コンテンツに基づいて特定のクラス名を段落に割り当てることができます（.imageOnlyまたは.mixedContent）。

于 2012-06-14T12:07:41.740 に答える
0

これを行うには、javascriptを使用してその関数を作成できます。これには、javascriptライブラリJqueryを使用するのが最適です。そのための関数がある場合、コードを追加することなく、後で新しい段落や画像を追加できます。

例を書いてみたかったのですが、時間があまりありません。私はあなたを少し助けたと思います

于 2012-06-14T11:59:49.227 に答える