目的要素の直前に挿入するjQueryメソッドbefore()

本ブログ2011年4月6日の記事 jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法 で書いた様に Twitter API にjQuery.ajaxメソッドでアクセスすれば 簡単につぶやきのXMLファイルを得ることが出来ます。 そうとなれば得られたXMLファイルから必要な要素を抽出し 思い描いた通りにブログ画面上に表示したくなろうというものです。 上記記事では数与えられた中にも要素は本当につぶやきのみ、 text 一つしか使用していませんでした。

其処で今回、ユーザーアイコンのURL情報の user.profile_image_url と、 ユーザー名 user.name 、ユーザープロフィール user.description 、またつぶやいた時間情報である created_at の三つも併せて表示しようと思い立った訳ですが…

スポンサーリンク

つぶやいた時間は兎も角、 ユーザー名とそのプロフィール及びアイコン画像はつぶやく毎に表示しては 聊か冗長に過ぎます。

この冗長な情報はつぶやきを表示するリストタグの前に一つに纏めてしまえば好いのではと思えば、 打って付けのメソッドが jQuery には用意されていました。 それが before() です。

実際に before() を利用してつぶやきを5つ表示したリストタグの直前にプロフィール情報

  1. ユーザーアイコンのURL情報：user.profile_image_url
  2. ユーザー名：user.name
  3. ユーザープロフィール：user.description
を段落タグとして一つにまとめて表示させてみると 下の様になります。

    beforeメソッドの他にも jQuery には insertBefore() メソッドが用意され言ってみれば此方は before の受動態、 主語と述語の位置関係が逆になるように用いることが出来ますので 用途に合わせてメソッドを選択すれば好いですね。

    4件のコメント

    1. 画像の下への回り込みを解除する方法-Twitter編

      Twitterのつぶやきをブログ内に表示させることが本ブログ2011年4月6日の記事jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法で上手く行くことが分かり、またユーザー情報を抽出して纏め表示させることも5月1日の記事目的要素の直前に挿入するｊQeryメソッドbefore()に

    2. Twitterから取得したつぶやき時間表示の日本慣用化

      Twitterのつぶやきをブログ内に表示させようと思い立ち、2011年4月6日の記事jQuery.ajaxメソッドでTwitterのつぶやきを取得する方法や、5月1日の記事目的要素の直前に挿入するjQueryメソッドbefore()また、5月6日の記事画像の下への回り込みを解除する方法-Twitter編など、い

    3. Twitterツイートの固定リンクの取得と表示

      以前は Twitter に於いてはつぶやき一つ一つの固定、パーマリンクを取得するのは、推奨されない仕様だったのか少々煩わしく感じる作業だった様に思います。処が最近では本家Webページでも時間表示をクリックすれば、該当するつぶやきのパーマリンクを得られます。本家の姿勢

    4. TwitterツイートのXMLログ保管と総つぶやき数の取得

      Twitter の使い方は人それぞれですから、そのツイートは単なるつぶやきに過ぎないので、そんなものの保存などは考えたこともない、という向きもあれば、ぃやぃや、自分は備忘録としてのツイートも多いのだから然るべき保存をしているという方もいらっしゃると思います。保存

    コメントは受け付けていません。