特定の子要素を持つ箇所のみ、javaScriptまたは、phpでの条件分岐

Question

現在WordPressの開発において行き止まってしまい、
解決策を調べたのですが、なかなか目的の挙動ができず、
この度、皆様にアドバイス頂戴できましたら幸いです。

前提・実現したいこと

行いたいことは、javaScriptの条件分岐でclassの出し分けです。
class="lien-1"の子要素に<br>がある場合class="lien-2"を追記するという内容です。

####出力したい内容
※以下は2つの<tr>要素にしていますが、実際は複数の<tr>要素がございます。

<tr>
<th>タイトル</th>
<td>
<p class="line-1">テキストエリアテキストエリア</p>
</td>
</tr>
<tr>
<th>タイトル</th>
<td>
<p class="line-1 line-2">テキストエリア<br>テキストエリア</p>
</td>
</tr>

###問題

問題は該当の条件がある場合、すべてのline-1にline-2が付与されてしまうということです。

###実際に出力される内容

<tr>
<th>タイトル</th>
<td>
<p class="line-1 line-2">テキストエリアテキストエリア</p>
</td>
</tr>
<tr>
<th>タイトル</th>
<td>
<p class="line-1 line-2">テキストエリア<br>テキストエリア</p>
</td>
</tr>

###現在の記述方法

カスタムフィールドを使用しており、管理画面から入力したポストを以下のように出力しています。

<?php
global $post;
$args = array( 'posts_per_page' => 100 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) {
setup_postdata($post);
?>
<tr>
<th>タイトル</th>
<td>
<p class="line-1"><?php the_field('text-area'); ?></p>
</td>
</tr>
<?php
      }
      wp_reset_postdata();
      ?>

###カスタムフィールドの設定
カスタムフィールドでフィールドエリアをテキストエリアに設定しています。
ですので、管理画面の入力に改行が入ると出力の際に<br>が付与されます。
この<br>付与された場合に

<p class="line-1">

を

<p class="line-1 line-2">

として、クラスを付与されるよう
###jqueryの記述

 $(function(){
 $('.line-1').find('br').each(function(){
if($('p .line-1').has('br')) 
{
$(".line-1") .addClass("line-2");//class名追加
} else {}
});
});

上記にて条件分岐を書きました。

しかし上記の場合、
line-1の子要素にbrがある場合、すべてのline-1にline-2が付与されてしまいます。

これを、line-1の子要素にbrがあるline-1にのみline-2を付与させるとして記述をしたいのです。

助けてください。。。お願いします。。。

Comments

[退会済みユーザー]

:first-line ってのが css にあるのだけれど、知ってる？

[pasomtr]

ご回答ありがとう御座います。
:first-lineについて調べて見ました。
問題は条件分岐での出し分けなのですが、
一個目とか二個目にというわけでなく、
brがある場合その親要素に適応するという条件分岐をしたく、
phpで投稿を取得して出力するので、どの位置にbrが来るかは、前提では判別が出来ません。

:first-lineに関して深く知識があるわけでないので、見当違いな発言をしていましたら申し訳ございません。

Answer 1

class="lien-1"の子要素に<br>がある場合class="lien-2"を追記するという内容です。

jQuery(".line-1:has(>br)") .addClass("line-2");

Re: pasomtr さん

Comments

[pasomtr]

think49様

ありがとう御座います！！！正常に動作しました！
本当に感謝申し上げます。

Answer 2

</body>の直前にでも置く ```javascript [...document.querySelectorAll('p.line-1')].forEach(p=>p.querySelector('br')&&p.classList.add('line-2'));

Comments

[pasomtr]

hai_hai様
すぐのご返答ありがとうございました！
すぐに構文を記述頂けましたこと感謝申し上げます！！
ずっと悩んでいたのでお力添え頂け本当に心が開放されました。。。
ありがとう御座います。