CODEWITHSUNDEEP
javascriptjqueryhtmljson
RedGiant
RedGiant

Reputation: 4748

Append some items to a div, and the rest to another div in jQuery

I'm writing a script to parse a JSON file, and I seem to have got myself into a tricky situation. Can I append half of the returned items in one div element and the other half in another div elemet?

Here is the original markup:

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

I want the page to display like this after appending the returned data:

<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 Code:

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

I'm looking for any possible suggestions, otherwise I have no choice but to parse the same feed twice. Any help would be appreciated.

Updated: I've set up a FIDDLE using Gogole news feed in JSON format converted by YQL as an example

Upvotes: 0

Views: 215

Answers (3)

Bellian
Bellian

Reputation: 2140

You can try something like this. if it does not matter which posts is displayed in which container

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

Upvotes: 2

Sharikov Vladislav
Sharikov Vladislav

Reputation: 7269

Use multiply selector.

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

I don't know what structure you have but you can try this:

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

Upvotes: 2

schnawel007
schnawel007

Reputation: 4020

Of course, but you need some separator or something

You can append all to your first div and then copy the part you want in the second div out of the first.

Example

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

Upvotes: 1

Related Questions