Question

[我已经在我的网站上创建了一个实时的推文提要，希望包含在旋转木马中。我面临的挑战是将twitter API提要div转换为“li”，以便每个twitter提要以单独的li显示。

我设法编写了一些javascript，试图实现我想要做的事情，但是我创造的东西已被证明是不成功的。这里有没有人可以纠正我哪里出错了？

<div class="carousel3">
    <ul id="tweets">
    <li class="a"> <a href="#">
        <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
    </a></li>
    </ul>
</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>');

new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 20,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: 'transparent',
      color: 'transparent'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#ffffff'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('thisiswired').start();

Answer 1

不知道哪里出错了，但将div转换为li的优雅方法是将.twtr-tweet{display:list-item;}添加到CSS中。

在CSS中，display选项可让我们div生成span个，tr / td s，table s，还有很多其他的东西。而且不只是来自 div，许多其他标记（例如span）都可以通过这种方式进行修改。

http://www.w3schools.com/cssref/pr_class_display.asp

将推文小部件<div>更改为<li>的</li> </div>

1 个答案: