要素の数をカウントして、対象のクラスにスタイルを追加したい。

Question

※大変申し訳ございません、質問内容を修正します。

.tag_set aの数が2つ以上のとき、
2つ以上になっている.grad_wrapブロック内を、

①「.tag_setの親div」に「.grad_item」を付与する
②「.grad_btn_js」を「display: flex;」にする

という動きをしたいです。(HTMLの例だと、2つ目の.grad_wrapが対象)
※.grad_wrapは増える可能性あります。

いただいた回答をもとに調整を試みましたが、
上手くいきません。

恐れ入りますが、ご教示の程よろしくお願いいたします。

<div class="grad_wrap">

	<input id="trigger1" class="grad_trigger" type="checkbox">
	<label class="grad_btn grad_btn_js" for="trigger1">ほげほげ</label>

	<div>
		<div class="tag_set">
			<a href="https://hoge">リンク</a>
		</div>
	</div>

</div>

<div class="grad_wrap">

	<input id="trigger1" class="grad_trigger" type="checkbox">
	<label class="grad_btn grad_btn_js" for="trigger1">ほげほげ</label>

	<div>
		<div class="tag_set">
			<a href="https://hoge">リンク</a>
			<a href="https://hoge">リンク</a>
			<a href="https://hoge">リンク</a>
		</div>
	</div>

</div>

Answer 1

こんにちは

CSSの疑似クラス nth-child　を使って、

修正前：

$('.hoge').css('display','block');

修正後：

$('.hoge:nth-child(2)').css('display','block');

とすればよいかと思います。
以下、使用例です。確認のため <div class="hoge">を３つにしています。

• 動作確認用サンプル： https://jsfiddle.net/jun68ykt/xuL5c4z0/1/

追記

上記の回答は、質問の題意を勘違いしていたかもしれません。その場合はどうぞスルーしてください。

追記2

上記の回答は、ご質問の意図が

• .hoge の中にある a の総数（ご質問に挙げられているHTMLだと4個）が 2個以上のとき、 2番目の .hogeのスタイルを変更したい。 （2番目の .hoge それ自体に含まれる a が1個または0個であっても。）

というものであると解釈したものでしたが、そうではなく、

• .hoge の各々について、各 .hoge の中にある aの個数に応じて、スタイルを変えたい。

というのが主旨であるならば、例えば以下のようにします。

$('.hoge').each(function(){
   $(this).css(
     'display',
     $('a', this).length >= 2 ? 'block' : 'none'
    );
});

• 動作確認用サンプル： https://jsfiddle.net/jun68ykt/kc2sjw0n/1/

上記では、各 .hoge について、その中にある a の個数が2個以上ならばdisplay に blockを、 1個以下であれば none を設定しています。

追記3

以下、修正後のご質問に対する回答になります。
他の書き方もありそうですが、一例として、

    $('.grad_wrap').each(function() {
        const tagSet = $('.tag_set', this);
        if ($('a',  tagSet).length >= 2) {
            tagSet.parent().addClass('grad_item');
            $('.grad_btn_js', this).css('display', 'flex');
        }     
    });  

以下は上記のコードを動作確認するためのものです。

• 動作確認用サンプル： https://jsfiddle.net/jun68ykt/tnLb23f0/4/

分かりやすくするため、「ほげほげ」や「リンク」などのテキストの末尾に番号を追加し、.grad_wrapのdivを４個にして、スタイルも適当に追加しました。

以上、参考になれば幸いです。

Comments

[yambejp]

$('.hoge:nth-child(2)')的な処理は一番やっちゃいけないやつですよ
これではクラスの中のn番目とか指定できません

ちなみに今回の質問自体複数のaを持つ.hogeにcssを付加したいようなので
その意味でも違うような気がします

[scoa]

ありがとうございます。質問内容を修正しました。説明不足で申し訳ございません。お手数ですが再度ご確認いただけますと幸いです。

[jun68ykt]

> abiscoaさん

こんにちは。
修正後のご質問に対するコード例を、回答のほうに追記3 として書きましたので、ご確認ください。

[scoa]

早々にありがとうございます。実現できました。

[jun68ykt]

> abiscoaさん
解決したようですね、よかったです????

> yambejpさん
貴重なご意見、ありがとうございました。

Answer 2

$(function(){
  $('.hoge').filter(function(){
    return $(this).find('a').length>=2;
  }).css('display','block');
});

追記

.hoge以外のクラス(例えば.fuga)にスタイル追加したい

質問の意図がちょっとわからないですが
hogeができればfugaもできるのでは？
hogeとfugaをそれぞれ同じ条件でcssを設定するならカンマでつないでください

<script>
$(function(){
  $('.hoge,.fuga').filter(function(){
    return $(this).find('a').length>=2;
  }).css('background-Color','red');
});
</script>


<div class="hoge">
<a href="#">リンクhoge1</a>
</div>

<div class="hoge">
<a href="#">リンクhoge2</a>
<a href="#">リンクhoge3</a>
<a href="#">リンクhoge4</a>
</div>

<div class="hoge">
<a href="#">リンクhoge5</a>
<a href="#">リンクhoge6</a>
</div>

<div class="fuga">
<a href="#">リンクfuga1</a>
<a href="#">リンクfuga2</a>
<a href="#">リンクfuga3</a>
</div>

<div class="fuga">
<a href="#">リンクfuga4</a>
</div>

Comments

[scoa]

ありがとうございます。恐れ入りますが、.hoge以外のクラス(例えば.fuga)にスタイル追加したい場合はどのように記述すれば良いのでしょうか。

[scoa]

説明不足で申し訳ございません。質問内容を修正しましたので、お手数ですが再度ご確認いただけますと幸いです。