JQueryで1つのセレクタに対して複数のメソッドを実行するように実装したい！

Question

前提・実現したいこと

現在のコードでも動作するのですが、非常に冗長なので簡易化したいです。

現状

HTMLではkey属性にhashキーを持っているdivタグがあり、その子要素としてtitleやbodyクラスを持つタグが存在します。

<div key="0123456789abcdef....">
   <div class="title">
      ...
   </div>
   <div class="body">
      ...
   </div>
</div>

JQeuryを用いてdivタグを書き換えています。

該当のソースコード

$('[key = "<%= @post.key %>"]').children(".title").text("<%= @post.title %>")
$('[key = "<%= @post.key %>"]').children(".body").text("<%= @post.body %>")
$('[key = "<%= @post.key %>"]').children(".key").text("<%= @post.key %>")

試したこと

メソッドチェーンなども試しましたが上手くいきませんでした。

Answer 1

いくつか方法はあります。

// その1 jQueryオブジェクトを変数に入れておく
var $elem = $('[key = "<%= @post.key %>"]')

$elem.children(".title").text("<%= @post.title %>")
$elem.children(".body").text("<%= @post.body %>")
$elem.children(".key").text("<%= @post.key %>")

// その2 .end()で戻す
$('[key = "<%= @post.key %>"]').children(".title").text("<%= @post.title %>")
  .end().children(".body").text("<%= @post.body %>")
  .end().children(".key").text("<%= @post.key %>")

Comments

[退会済みユーザー]

JQueryオブジェクトを変数に入れて処理が出来るんですね！
JavaScriptの勉強不足です...
詳しい回答をありがとうございました！

Answer 2

今回のケースだけでいえばこれでいけますが

<script>
$(function(){
  var x={"title":"hoge","body":"fuga","key":"piyo",};
  $('[key=123]').find(".title,.body,.key").text(function(){
    return x[$(this).attr('class')];
  });
});
</script>
<div key="123">
<div class="title"></div>
<div class="body"></div>
<div class="key"></div>
</div>

classは複数指定ができるので、必ずしもこれは正しくありません
つなげるだけならendでもどる

$(function(){
  var x={"title":"hoge","body":"fuga","key":"piyo",};
  $('[key=123]')
  .find(".title").text(x.title).end()
  .find(".body").text(x.body).end()
  .find(".key").text(x.key);
});

これではあまり意味がないような・・・
あとはwithとか

$(function(){
  var x={"title":"hoge","body":"fuga","key":"piyo",};
  with($('[key=123]')){
    find(".title").text(x.title);
    find(".body").text(x.body);
    find(".key").text(x.key);
  }
});