javascript - 在 jQuery 中将一些项目附加到一个 div，并将其余的附加到另一个 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>");}        
 });

我正在寻找任何可能的建议，否则我别无选择，只能解析相同的提要两次。任何帮助，将不胜感激。

更新:我已经设置了 FIDDLE 以YQL转换的JSON格式Gogole News Feed为例

Answer 1

使用多重选择器。

$.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>");}        
});