追加一些項目的div，其餘的jQuery的另一個div

Question

我正在寫一個腳本來解析一個JSON文件，我似乎讓自己陷入了一個棘手的情況。我可以在一個div元素中追加一半返回的項目，另一半在另一個div元素中追加嗎？

這裏是原來的標記：

<div class="feed"><div class="displayfeed main"></div></div> 
<div class="feed"><div class="displayfeed second"></div></div> 

我想要的頁面來顯示這樣的附加返回的數據後：

<div class="feed"> 
    <div class="displayfeed main"> 
     <h3>item1's title</h3> //Half of the items in "div.main" 
     ....... 
    </div> 
</div> 

<div class="feed"> 
    <div class="displayfeed second"> 
    <h3>item2's title</h3> //Half of the items in "div.second" 
    ........... 
    </div> 
</div> 

JS代碼：

$.ajax({ 
    url: source, 
    success: function (data) { 
    var item_html = 
     $(data.items).each(function (index, item) { 
      '<h3>'+item.title+'</h3>'; 
     }); 
     //Any way to append some of them in ('.main') and the rest in ('.second')? 
    $('.displayfeed').append(item_html); 
    }, 
    error: function() {$searcharea.append("<b>No Results Returned</b>");}   
}); 

我我尋找任何可能的建議，否則我別無選擇，只能解析相同的提要兩次。任何幫助，將不勝感激。

更新時間： 我已經使用通過YQL轉換作爲一個例子

Answer 1

使用多重選擇器JSON格式Gogole新聞源建立一個FIDDLE。

$.ajax({ 
    url: source, 
    success: function (data) { 
     var item_html_main = ""; 
     var item_html_second = ""; 
     // assign values to item_html_main and item_html_second variables 
     $('.displayfeed.main').append(item_html_main); 
     $('.displayfeed.second').append(item_html_second); 
    }, 
    error: function() {$searcharea.append("<b>No Results Returned</b>");}   
}); 

我不知道你有什麼結構，但你可以試試這個：

$.ajax({ 
    url: source, 
    success: function (data) { 
     var item_html_main = ""; 
     var item_html_second = ""; 
     // assign values to item_html_main and item_html_second variables 
     var count = data.count; 
     var half = count/2; 
     var counter = 0; 
     for(item in data) { 
      if(counter < half) { 
       item_html_main += item; 
      } else { 
       item_html_secodn += item; 
      } 
      counter++; 
     } 
     $('.displayfeed.main').append(item_html_main); 
     $('.displayfeed.second').append(item_html_second); 
    }, 
    error: function() {$searcharea.append("<b>No Results Returned</b>");}   
}); 

Answer 2

當然，不過你需要一些分離器或東西

您可以將所有關於你的第div，然後從第一個複製第二個div中想要的部分。

例

item_html

<h2>Headline</h2> 
<span> 
News Text 
</span> 

JS

$('.displayfeed').append(item_html); 
sec = $('.displayfeed').find('span').html(); 
$('.displayfeed').find('span').remove(); 
$('.displayfeed second').append(sec); 

Answer 3

你可以嘗試這樣的事情。如果它並不重要職位顯示在哪個容器

$.ajax({ 
    url: "<your-URL>", 
    success: function (data) { 
     var length = 0; 
     var items = data.query.results.item; 
     items = items.map(function(item){ 
      return '<h3>'+item.title+'</h3>'; 
     }); 
     var half = items.length/2; 
     for(var i = 0; i < items.length; i++) 
      if(i < half) 
       $('.main').append(items[i]); 
      else 
       $('.second').append(items[i]); 
      length++; 
     }, 

    error: function() {$searcharea.append("<b>No Results Returned</b>");}   
});