CODEWITHSUNDEEP
jqueryappend
user3451888
user3451888

Reputation: 27

Insert spaces between appended items

I have a little problem, need to insert a space between 2 posts.

My code:

var news01 = $('#news01').empty();      
$.ajax({
    url: url,
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status){
        $.each(data, function(i,item){ 
            var landmark = '</br><b> News</b></br>';            
            var landmark2 = '<h3>title</h3>';   
            var landmark3 = '<a href="#"  data-transition="pop"><img  src=""  style="width:100%"></a>';
            var landmark5 = '<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-mini="true" data-collapsed="true"><h3>Leggi tutto...</h3><p>bla bla bla</p></div>';           
            var landmark4 = '<fieldset class="ui-grid-b"></div>';

            news01.append(landmark).trigger('updatelayout');
            news01.append(landmark2).trigger('updatelayout');   
            news01.append(landmark3).trigger('updatelayout');
            news01.append(landmark5).collapsibleset().trigger('updatelayout');
            news01.append(landmark4).trigger('updatelayout');   

        });
    },
    error: function(){
        news01.html ('<div><a class="ui-body ui-body-b ui-corner"><b>error</b></a></div>');
    }
});

and html

   <div class="post">
   <div  id="news01"></div>
   </div>

and this is i want

can anyone help me) thx a lot

Upvotes: 1

Views: 52

Answers (2)

Rana Waqas Ahmed
Rana Waqas Ahmed

Reputation: 1

just wrap your html in div and give padding to it.

<div style="padding-bottom:10px">
    <h1>Heading</h1>
    <p>lorem ipsum</p>
</div>

you shouldn't have to take 5 landmark variables to append html. I want to know why are you using trigger and what is updatelayout? you could do it like:

$('updatelayout').on('click',function(){
    $.ajax({
        url: url,
        dataType: 'jsonp',
        jsonp: 'jsoncallback',
        timeout: 5000,
        success: function(data, status){
        var landmark = '<div style="padding-bottom:10px;">';
            $.each(data, function(i,item){
                landmark = '</br><b> News</b></br>';            
                landmark += '<h3>title</h3>';   
                landmark += '<a href="#"  data-transition="pop"><img  src=""  style="width:100%"></a>';
                landmark += '<div data-role="collapsible" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-mini="true" data-collapsed="true"><h3>Leggi tutto...</h3><p>bla bla bla</p></div>';           
                var landmark += '<fieldset class="ui-grid-b"></div>';
            });
            landmark = "</div>";
            $('#news01').html(element);
        },
        error: function(){
            news01.html ('<div><a class="ui-body ui-body-b ui-corner"><b>error</b></a></div>');
        }
    });
});

Upvotes: 0

Chris
Chris

Reputation: 997

Wrap it in the a div

var landmark = '<div><b> News</b></br>';

and add

var landmark = '<div style="margin-bottom: 15px;"><b> News</b></br>';

Just remember to close the div again

var landmark4 = '<fieldset class="ui-grid-b"></div></div>';

Upvotes: 1

Related Questions