Question

我试图：

获取div.main-content（这是主要的div）
从那里追加
然后找到img class avatar-main并将img url放在那里
然后获取h5类fullName并输入fullName＆amp;跨度类 userNameMain并将用户名放在那里，＆amp; timePosted类在那里发布时间
然后获取段落类tweetContent并将文本放在那里
最后，我会添加一个带有类的静态uls：

这是我的jQuery代码：

$(document).ready(function(){
  ativeTweets();
});

function ativeTweets(){
  var index = streams.home.length - 1;
  while(index >= 0){
    var tweet = streams.home[index];
    var $tweet = $('div.main-content');
    $tweet.append('<div class="box-content"></div>');
    $tweet.append('<img src="" align="left" class="avatar-main">');
    $tweet.append('<h5 class="fullNameMain"> <span class="userNameMain"> <span class="timePosted">* 5h</span></span></h5>');
    $tweet.append('<p class="tweetContent"></p>');
    $tweet.append('<ul class="activities">
                <li><span class="comment"></span> 48K</li>
                <li><span class="retweet"></span> 50K</li>
                <li><span class="heart"></span> 100K</li>
                <li><span class="msg"></span> 22K</li>
              </ul>');
    $('.box-content').find('.avatar-main').attr('src', 'img/' + tweet.user + '.jpg');
    $('.box-content').find('.fullNameMain').text(tweet.user);
    $('.box-content').find('span.userNameMain').text('@' + tweet.user);
    $('.box-content').find('span.timePosted').text(new Date());
    $('.box-content').find('.tweetContent').text(tweet.message);
    index -= 1;
  }
}

我不确定，但由于某种原因，这些代码无法正常工作，并且它根本不会在div上添加任何内容：

<div id="main-content"></div>

ERROR：

未捕获的SyntaxError：无效或意外的令牌

我在这里做错了吗？请帮忙！

Answer 1

你有很多问题。

首先，您尝试在代码中使用class not id。
您无法在多行上扩展字符串
你附加到div但是在框中查找。我把它们放在盒子里
您也可以在创建时（不是严格需要）缓存框引用
您使用的是.text并覆盖了所包含的元素

＆＃13;

$(function() {
  ativeTweets();
});
var streams = {};
 streams.home= [{user:"one",message:"on mess"},{user:"two",message:"on two mess"}];//just to run locally
function ativeTweets() {
  var scount = streams.home.length;
  var index = streams.home.length;
  while (index--) {
    var tweet = streams.home[index];
    var $tweet = $('#main-content');
    $tweet.append('<div class="box-content"></div>');
    var mybox = $tweet.find('.box-content').last();
    mybox.append('<img src="" align="left" class="avatar-main">');
    mybox.append('<h5 class="fullNameMain"> <span class="userNameMain"> <span class="timePosted">* 5h</span></span></h5>');
    mybox.append('<p class="tweetContent"></p>');
    mybox.append('<ul class="activities">' +
      '<li><span class="comment"></span> 48K</li>' +
      '<li><span class="retweet"></span> 50K</li>' +
      '<li><span class="heart"></span> 100K</li>' +
      '<li><span class="msg"></span> 22K</li>' +
      '</ul>');
    mybox.find('.avatar-main').attr('src', 'img/' + tweet.user + '.jpg');
    mybox.find('.fullNameMain').prepend(tweet.user);
    mybox.find('span.userNameMain').prepend('@' + tweet.user);
    mybox.find('span.timePosted').text(new Date());
    mybox.find('.tweetContent').text(tweet.message);
    
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-content"></div>

＆＃13;

jQuery附加代码不会附加我的div

1 个答案: