Search code examples
javascriptjquerycsstwitterjcarousel

twitter widget wrap issue

i've created a live tweet feed onto my site which a want wrapped in a carousel. the challenge i'm facing is converting the twitter API feed divs into "li's" so each twitter feed is displayed in a seperate li.

click here

I've been doing so reading into the following;

http://api.jquery.com/wrap/

however i'm finding it hard to digest. Is there anyone in this forum that can kindly breakdown the development process to achieve this?

thanks

Solution

  • I helped out on your other question so im assuming you're wanting to apply this to the same url - http://thisiswired.com/test/test.html?

    If that's the case you can use the following code:

    // Remove unwanted div
$('.twtr-reference-tweet').remove();

// Change the <div>s to <li>s
$('.twtr-tweet').each(function() {
  $(this).replaceWith('<li id="'+$(this).attr('id')+'" class="'+$(this).attr('class')+'">' + $(this).html() + '</li>');
});

// Change the parent <div> to <ul> and wrap it in a <div> ready to apply the carousel
$('.twtr-tweets').replaceWith('<div id="carouselId"> <ul class="twtr-tweets">'+$('.twtr-tweets').html()+'</ul></div>');

    Sorted!