【JavaScript】変数でまとめられる箇所について

Question

前提・実現したいこと

Js（jQuery）を使用して特定の複数の要素に対して、
クラスの追加やcssの変更を行う際、もっとスマートに記述したいのですが、
下記のような場合うまくまとめれることは可能でしょうか？

該当のソースコード

//例：アコーディオンの開閉
$(function(){

    $('.btn').on('click',function(){
        $('.accordion dt:last-child').addClass('active');
        $('.accordion dd:last-child').show();
    });

});

試したこと

上記のように１つのボタンで複数の要素、
加えて似たような記述が増えてきてしまったため変数でまとめようとしたのですが、
いい方法が思い浮かばずこちらに質問させていただきました。

$('.accordion dt:first-of-type') ←この部分
$('.accordion dd:first-of-type') ←この部分

ご教示をお願いします。

Comments

[azuapricot]

変にまとめちゃう方がかえって可読性落ちたりしますし
そのくらいなら別にそのままでもよいのでは？という気がしますけど...

[MeB]

ご質問ありがとうございます。
>変にまとめちゃう方がかえって可読性落ちたり
たしかにそれもそうですね・・・

それ以前にこれのどこをまとめれるかわからず今回質問させていただきました。

[miyabi_pudding]

どのような実装をしたいかによって、どのような方法がいいかは変わってきます。
実装したいことによっては、質問者さんのコードが一番正解のパターンもあります。
もう少し詳しく実装したい機能を記載ください。また、HTMLコードも記載いただかないと、
正解、よりよいコードの回答をしようがありません。

[MeB]

ありがとうございます。
＞実装をしたいか
ここが曖昧でした…。申し訳ありません。
以後何かで質問するときはより明確にして質問させていただきます。

Answer 1

dtやddは必ずしも1対1の関係にないのできちんと場合分けをしないと
正しい処理はできないと思います。

逆にdl/dt/ddに一定の規則性をもたせているのでしたらそれを提示スべきです

sample

法則性がなく、とにかく「:first-of-type」

<script>
$(function(){
  $('.accordion').find('dt,dd').filter(':last-of-type').css('color','red');
});
</script>
<dl class="accordion">
<dt>dt1</dt>
<dd>dd1</dd>
<dt>dt2</dt>
<dd>dd2</dd>
<dd>dd3</dd>
<dd>dd4</dd>
<dt>dt3</dt>
</dl>

たとえばdt,ddのそれぞれの最後の要素に別の属性をつけるなら

$(function(){
  $('.accordion').find(':last-of-type').filter('dt').css('color','red').end().filter('dd').css('color','blue');
});

Comments

[MeB]

ご回答ありがとうございます。
一定の規則性などは特になく…
現状では
$('.accordion dt:last-child').addClass('active');
$('.accordion dd:last-child').show();
と分けて記述するのがベストという認識で問題ないでしょうか？

[yambejp]

要領を得ないので拡大解釈しておきました

[MeB]

他の方からもご指摘があったようにより明確にして以後質問しようと思います。
>要領を得ないので拡大解釈しておきました
こちらありがとうございます。お手数おかけしました。