javascript初心者です。
調べてもうまくいく方法が見つからず、自分で試行錯誤してみたのですがなかなかうまくできなかったため
ご教授いただけますと助かります。

動的出力されるページにおいて、下記2パターンが出力されるページがあり、

▼パターン１

<article class="aaa">あいうえお</article> <div class="bbb">かきくけこ</div>

▼パターン２

<div class="bbb">かきくけこ</div>

パターン１の時（class="aaa" が表示されるとき）に、 class="bbb" に別のclass（例えばccc）を付与したいです。

下記を試してみましたが、動作しませんでした。

こちら解決できる方がいるとありがたいです。

何卒、宜しくお願いいたします。

yambejp

2019/05/27 05:02 編集

「class="aaa" が表示されるとき」が曖昧ですクラスなのでaaaが複数のHTML要素に付加されている可能性があります・組み合わせがあるのか・aaaが一つでも表示されているときなのか・全部のaaaが表示されているときなのかによって処理が違いますまた、表示というのも display:none、visibility:hidden、opacity:0などどれを指しているかで処理が変わってきます

退会済みユーザー

2019/05/27 05:11

「class="aaa" が表示されるとき」というのは、「ソース上に存在しているとき」です。ソース上に複数存在する場合ももちろんあります。一つでも存在する場合は　class="bbb"　に class="ccc"　を付与する、一つも存在しない場合は付与しない、という動作を希望しています。表示はdisplay:block、none　で表示切替できれば理想です。

x_x

2019/05/27 07:47

すでに回答がついていますが、確認はどのように行っているのでしょうか？現状では CSS がなく class があっても表示状態は変わらないため、開発者ツールで確認しているのでしょうか？

退会済みユーザー

2019/05/27 07:49

いえ、こちらはあくまで例なので実際のサイトに反映させて確認しています

x_x

2019/05/27 08:16

変わらない表示状態を見て判断しているということですか？

退会済みユーザー

2019/05/27 08:50

変わらない表示状態とはどういうことでしょうか？

行動規範の内容に同意します

回答3件

シンタックスエラーなので動作しないと思います。

下記を試してみましたが、動作しませんでした。

もう一度下記のコードで試してみていただけますか。

javascript
1$('article').ready(function () {
2　　if ($('.aaa').length > 0) {
3　　　　$('.bbb').addClass('ccc');
4　　}
5});

投稿2019/05/27 05:53

退会済みユーザー

総合スコア0

退会済みユーザー

2019/05/27 07:05

こちらは $('.bbb').addClass('ccc'); ここの部分だけであれば問題なく動くのですが、 if ($('.aaa').length > 0) { ここの.aaaがあるかないか、の部分がうまく動いていないみたいです。。。

行動規範の内容に同意します

「.aaa」の表示/非表示が動的かどうかでも調整が必要ですが
とりあえず

javascript
1<script>
2$(function(){
3  $('.bbb').toggleClass("ccc",$('.aaa:visible').length>0);
4});
5</script>
6
7<article class="aaa">あいうえお</article>
8<div class="bbb">かきくけこ</div>
9<div class="bbb">さしすせそ</div>

追記

以下コピペして再確認ください

javascript
1<style>
2.ccc{background-Color:yellow}
3</style>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5<script>
6$(function(){
7  $('.bbb1').toggleClass("ccc",$('.aaa1:visible').length>0);
8  $('.bbb2').toggleClass("ccc",$('.aaa2:visible').length>0);
9});
10</script>
11
12<article class="aaa1">あいうえお</article>
13<div class="bbb1">かきくけこ</div>
14<div class="bbb1">さしすせそ</div>
15
16<article class="aaa2" style="display:none">あいうえお</article>
17<div class="bbb2">かきくけこ</div>
18<div class="bbb2">さしすせそ</div>
19

トリガーを変えてみる

DOMContentLoaded相当から、load後の表示時点に変えてみてもだめですか？

javascript
1<script>
2$(window).on('pageshow',function(){
3  $('.bbb1').toggleClass("ccc",$('.aaa1:visible').length>0);
4  $('.bbb2').toggleClass("ccc",$('.aaa2:visible').length>0);
5});
6</script>
7
8<article class="aaa1">あいうえお</article>
9<div class="bbb1">かきくけこ</div>
10<div class="bbb1">さしすせそ</div>
11
12<article class="aaa2" style="display:none">あいうえお</article>
13<div class="bbb2">かきくけこ</div>
14<div class="bbb2">さしすせそ</div>