codebird でつぶやきID取得

#07 つぶやきのIDを取得してみよう
http://dotinstall.com/lessons/more_php_v2/21807
を参考につぶやきのIDを取得

とりあえず、プログラムができてきたので
index.html からアクセスしてみる

もし、うまくいかないのなら
chrome なら
Ctrl + shift + i
で java script console でエラーが表示されるので
これを元に修正していく

修正できたら、もっと読むボタンをクリックすることで
自分がつぶやいた過去のつぶやきをみることができる

さらに表示したいのなら
もっと読むボタンを押せばいい

このつぶやきを
右クリックして要素の検証を選び
chrome developer tools で
Element タブでみてみると

<li id="tweet_つぶやきID"></li>

となっているのが確認できる

まずは、このIDを引っ張ってくるという処理を
index.html の　java script で行う

li 要素が追加されていたら、という判定にするので

if($('#tweets > li').length){
}

で
id=”tweets” の中に li要素が存在しているなら
という判定をして

li要素の一番最後なので
:last を使い

$('#tweets > li:last')
と記述して
.attr('id').replace();

とする

.attr() については
http://semooh.jp/jquery/api/attributes/attr/properties/
を参考
この関数は、ハッシュオブジェクトを引数に渡すことで
すべての要素に複数の属性を設定できるというもの

ちょっと長めだけど

$('#tweets > li:last').attr('id')

なので
id=”tweets” の中の最後の li 要素の id という意味になる

これを .replace() で置き換える

replace() を使っているのは
IDがほしいけど、実際には
tweet_つぶやきID
となっているので、この最初の tweet_ を消したいから
今回は　正規表現を使って replace() で置き換える

.replace('/tweet_','');

これで
tweet_ の部分が削除される

これで、無事にIDのみになったので

max_id = $('$tweets > li:last').attr('id').replace(/^tweet_/,'');

として、
max_id に最後のIDを格納する

このIDが格納できたか確認したいので

console.log(max_id);

で確認

もしミスがあるなら、
developer tools の console タブで
エラーがでる

成功なら、この console タブへ
IDが表示される

ちなみに2回ほど
もっと読むボタンを押さないと表示されない

コメントを残す コメントをキャンセル