jQuery for RSSを使用して複数の投稿が表示されない

Question

RSSフィードを作成しようとしていて、1つの投稿を表示してうまく動作しています。複数の投稿を表示します。

最初に投稿タイトル（パネルタイトル）のみが表示され、そのコンテンツ（データコンテンツ）を表示するためにクリックエフェクト（jQuery）が追加されました。複数の投稿を（コンソールに表示されたオブジェクトとして）取り出しますが、表示されません。

私は何をしたいですか？ - >複数の投稿タイトルを最初に表示し、onClickはそれぞれのコンテンツ本文を表示します。

私はeach（）とappend（）を使うべきだと思いますが、どうやってそれを行うのかは分かりません。

function blogRSS(url, container) { 
var content = $('.data-content'); //console.log(content); 

$.ajax({ 
url: document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(url), 
dataType: 'json', 
success: function(data) { 
    console.log(data.responseData.feed); //it shows object of all fetched posts 

    $.each(data.responseData.feed.entries, function(key, value) { 
     var thehtml = '<h4><a href="' + value.link + '" target="_blank">' + value.title + '</a></h4>'; 

     $('.panel-heading').html(thehtml); 
     $('.data-content').html(value.content); 

    }); 
    $('.data-title').find('h4').addClass('panel-title'); 
} 
}); 
}; 

Answer 1

手順この作品を作るために：

あなたが追加項目ごとに含むHTMLを追加する必要があり

あなたがここにfiddle

にコード全体を確認することができますがjsのファイルです。できるだけスクリプトを少し変更するために、各項目の構造体を含むvarを使用してこれを行い、各項目が追加される前に追加します。

var itemLayout = '<div class="panel panel-default "><div class="data-title"><div class="glyphicon glyphicon-collapse-down icon expand_icon"></div><div class="panel-heading"></div><div class="bkmark_icon"></div></div><div class="data-content panel-body"></div></div>'; 

追記：

その後、あなたはすべての項目を選択しないように、あなたはあなたが唯一のあなたが追加した項目を編集するために .last()を使用することができ、追加言うコンテンツに必要

$("body").append(itemLayout); 

。

$('.panel-heading').last().html(thehtml); 
$('.data-content').last().html(value.content); 

アイテムが正しく追加されたので、ボタンがどこでも機能するようにする必要があります。彼らはこれにそれを変更すると、それは動的な要素にアクセスできるようになり、動的に現在のclickハンドラ文句を言わないの仕事を追加されているので：

$(document).on('click', '.panel-heading, .expand_icon', function() {}) 

そして、この内、あなたはこれだけのアイテムを選択していることを確認する必要があります要素。

私は、あなたのJSFiddleにいくつかの更新をした見てみると、それはあなたが後にしているものの大半を行う必要がありました：

Updated Fiddle

このバージョンでは、クローンにHTMLファイルから構造を使用します。そしてフィードを取り込み、それはまだ動的な要素ですが、これはHTMLファイルで、あなたのHTMLを保持します：

New fiddle