質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascriptで要素の数によってクラス名を変更

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 717

ssk

score 270

wordpressで、ループを回して、特定のカスタム投稿タイプのアイキャッチ画像を出力しています。
その際に、1件の場合はこのクラス、2件の場合はこのクラス。のように、数に応じてクラスを変更したいです。


1件のアイキャッチ画像の場合は
<figure class="center"></figure>

2件のアイキャッチ画像を表示する場合は
<figure class="float"></figure>
<figure class="float"></figure>

のようにしたいです。
お力添えください。お願いします。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

0

javascriptでであれば、$("hoge").lengthで要素の数を数えて、if文で振り分ければ良いと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/15 17:42

    roisinさん
    お答えいただき、ありがとうございます。
    javascriptの知識がなく、if以降の書き方がわからず、困っています><

    キャンセル

0

説明端折ってしまい、すみません(^^;

あくまで一例ですが、下記が元々のHTMLだった場合
<figure class="test">あいうえお</figure>

// 変数a のネーミングはよしなに変えてください。
var a = $(".test").length;
if(a == 1) {
  // 指定のクラスが1つのときは、指定のタグにクラス名「center」を追加
  $(".test").addClass("center");
} else if(a == 2) {
  // 指定のクラスが2つのときは、指定のタグにクラス名「float」を追加
  $(".test").addClass("float");
}
// 他の処理があれば記述
// else {
// 処理
// }

クラス指定をしない場合は、
$(".test")の .test をタグ名にしてあげれば大丈夫かと。

ただ、他の場所に同じタグがある場合(分かりやすく言うと、Pタグのように)
そっちにもクラスが追加されちゃいますので、ご注意ください。

今回$(".hoge")を使いましたが、
getElementsByClassName(クラス名取得)やgetElementsByTagName(タグ名取得)でも大丈夫です。

と、おそらく分かってる範囲だろう事も一応記述してみましたが、
上記コードでいかがでしょうか~

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/09/16 18:02

    rosinさん、解りやすいご説明ありがとうございます。
    試してみたのですが、クラスを追加できずにいます。。><

    <script type="text/javascript">
    var a = $(".timage").length;
    if(a == 1) {
    // 指定のクラスが1つのときは、指定のタグにクラス名「center」を追加
    $(".timage").addClass("center");
    }else{
    $(".timage").addClass("float");
    }
    </script>

    ↑上記の記述で問題ないでしょうか??

    キャンセル

  • 2015/09/16 18:56 編集

    あってますねー、問題ないです!

    自分の記述が間違えてたのかと思って、試しにやってみましたが、できました。
    (sskさんのコードでも動きましたよ!)

    もしかしたらjQueryファイル読み込んでないのかもですね。

    wordpress触ったことないので、確認していただきたいのですが、下記のようなコード入ってませんか?入ってなかったら、入れちゃってください。

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    ちなみに、googleさんが提供しているものなので、ご安心ください。(下記リンク参照)
    https://developers.google.com/speed/libraries/#jquery

    これで動くと良いのですが。。

    あと考えられるのは、レンダリングの順番ですかね。
    指定のHTMLよりも後にjavascript書かないとダメかも。

    あとはなんだろ。。とりあえず、上記試してみてください。
    出来なかったら、教えてくださいな。

    キャンセル

  • 2015/09/18 14:26

    body内の一番後ろに入れておけば要素の読み込みは保証できますね。
    実際に使うときは回答者さんのコードを即時関数で囲って使うといいと思いますよ。
    理由としてはグローバル変数を減らすためですね。
    即時関数は以下のようなものです
    (function (){
    /* コード */
    }());

    キャンセル

  • 2015/09/19 10:10

    roisinさん、 Cf_cwdさん
    返信ありがとうございます。意図する結果で動くようになりました。
    wordpressだと以下のコードが必要?のようですね><
    jQuery(document).ready(function($){

    なので、最終的にこの形になりました。
    <script type="text/javascript">
    jQuery(document).ready(function($){
    $("親クラス名").each(function () {
    var num = $(this).find('クラス名').length;
    if(num==1){
    $(this).find('クラス名').addClass("center");
    }else{
    $(this).find('クラス名').addClass("新しく追加するクラス名");
    }
    });
    });
    </script>

    ありがとうございました><

    キャンセル

  • 2015/09/23 23:49

    解決したならばきちんとベストアンサーとして指定してはどうでしょうか……?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16957questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。