Question

我正在编写一个脚本来解析JSON文件，我似乎陷入了棘手的境地。我可以将一半返回的项目附加到一个div元素中，另一半添加到另一个div elemet中吗？

这是原始标记：

<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转换的JSON格式的Gogole新闻Feed设置 FIDDLE 作为示例

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

Answer 2

你可以尝试这样的事情。如果在哪个容器中显示哪些帖子无关紧要

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

Answer 3

当然，但你需要一些分隔符或其他东西

您可以将所有内容附加到第一个div，然后将第二个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);

将一些项添加到div，其余的添加到jQuery中的另一个div

3 个答案: