使用jQuery Append

时间：2017-01-05 01:49:29

标签： javascript jquery html

我在使用jQuery＆＃39; .append()方法时遇到问题。这是我的代码：

$('#all ul li').each(function() {
   if ($(this).children('.material-icons').hasClass('offline-icon') == false) {
      $('#online ul').append(this);
   }
});

＆＃13;
＆＃13; 
$(document).ready(function() {
  // Declare all variables
  var users = ["freecodecamp", "trymacs", "phonecats"];
  var info = {};
  var i;
  var identifier;
  
  for (i = 0; i < users.length; i++) {
    $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + users[i], function(json) {
      //create key for each object
      identifier = json["_links"].self;
      identifier = JSON.stringify(identifier);
      identifier = identifier.substr(identifier.lastIndexOf('/') + 1);
      identifier = identifier.slice(0, -1);
      
      // Add key/value pair to object
      info[identifier] = JSON.stringify(json);
      
      // Check if user is streaming using length of object
      if (info.freecodecamp.length < 400) {
        $('#freecodecamp .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
      if (info.trymacs.length < 400) {
        $('#trymacs .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
      if (info.phonecats.length < 400) {
        $('#phonecats .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
    });
  }
  
  // Filter content into online section
  $('#all ul li').each(function() {
    if ($(this).children('.material-icons').hasClass('offline-icon') == false) {
      $('#online ul').append(this);
    }
  });

  
  /*$.getJSON("", function(json) {

        // Only change code below this line.
        json = json.filter(function(val) {
          return (val.id !== 1);
        });
        
        
        // Only change code above this line.

        json.forEach(function(val) {

        });
  });
  
  // Thanks to Tyler Moeller for his help with this function
  /*users.map(function(val) {
    var url = 'https://wind-bow.gomix.me/twitch-api/streams/' + val
    $.getJSON(url, logTheData);
  });

  function logTheData(data) {
    status.push(data);
  }
  console.log(status)
});*/
});
＆＃13; 
body {
  background-color: pink;
}

#app {
  margin-top: 50px;
  padding: 0;
}

.head {
  background-color: #ee6e73;
  padding: 15px
}

.head h1 {
  margin: 0;
  font-size: 43px;
  color: #fff;
  text-shadow: 0.012em 0.012em #ccc;
}

.collection, .collection-item {
  border: none;
  border-bottom: none !important;
}
.collection-item img {
  height: 40px
}
.filter {
  background-color: #fff;
  padding: 0 !important;
}

.filter ul {
  margin: 0;
}

.filter ul li {
  border-top: 1px solid #eee;
}
img {
  border: 2px solid #ddd;
}
.offline-icon {
  color: #e53935;
}
＆＃13; 
<div class="row">
  <div class="col m8 offset-m2 s12 z-depth-1" id="app">
    <div class="head">
      <h1>Twitch.tv Streamers</h1>
    </div>
    <ul class="tabs">
      <li class="tab col s3"><a class="active" href="#all">All</a></li>
      <li class="tab col s3"><a href="#online">Online</a></li>
      <li class="tab col s3"><a href="#offline">Offline</a></li>
    </ul>
    <div id="all" class="col s12 filter">
      <ul class="collection">

        <li class="collection-item" id="freecodecamp">
            <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" alt="" class="circle">
            FreeCodeCamp
            <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="trymacs">
            <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/trymacs-profile_image-3c2ac4643bab750a-300x300.jpeg" alt="" class="circle">
            Trymacs
            <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="phonecats">
            <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/phonecats-profile_image-a536a337b2e58260-300x300.png" alt="" class="circle">
            phonecats
            <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
      <!--<li>Item <i class="material-icons">portable_wifi_off</i></li>
      <li>Item <i class="material-icons">wifi_tethering</i></li>
      <li>Item</li>-->
      </ul>
    </div>
    <div id="online" class="col s12 filter">
      <ul class="collection">
      
      </ul>
    </div>
    <div id="offline" class="col s12 filter">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

基本上，我只希望没有offline-icon类的列表项出现在在线选项卡中。但是，相反，我的代码正在移动所有＆＃34; all＆＃34;选项卡到＆＃34;在线＆＃34;标签。

提前感谢您的帮助。

4 个答案:

答案 0 :(得分：1)

尝试替换：

$('#online ul').append(this);

要

$('#online ul').append($(this).clone());

答案 1 :(得分：1)

我发现了问题：

http://codepen.io/anon/pen/qREqZg?editors=0110

将代码置于get json函数中 - 例如，在添加类时。

在你检查过课程时（doc ready / ajax call not finished），它们不存在，所以现在应该修复它。

     if (info.phonecats.length < 400) {
        $('#phonecats .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
       $('#all ul li').each(function() {
    if ($(this).children('.material-icons').hasClass('offline-icon') == false) {
      $('#online ul').append($(this).clone());
    }
  });

修改： 所以，基本上，由于DOM已更新，在ajax请求之后，等待成功，而是将您的代码段添加到，例如， done（）或always（）回调：http://api.jquery.com/jquery.getjson/

答案 2 :(得分：1)

您的完整代码非常低效。尽管您显示的是正确的片段，但您使用带有for循环的异步$.getJSON调用，然后在回调中用手检查每个流式传输器将会变得乏味。在请求完成之前，没有列表项具有脱机图标 - 仅在请求给出响应后才添加，但到那时您的检查已经运行。请参阅下面的固定，更有效的解决方案：

$(document).ready(function() {
  // Declare all variables
  var users = ["freecodecamp", "trymacs", "phonecats"];
  var info = {};
  var i;
  var identifier;
  var finished = 0;
  var lastCheck = function() {
    // Filter content into online/offline sections
    $('#all ul li').each(function() {
      var isOffline = $(this).find('.offline-icon').length;
      $('#'+(isOffline?'offline':'online')+' ul').append($(this).clone());
    });
  };

  for (i = 0; i < users.length; i++) {
    (function(i) {
      var username = users[i];
      $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + username, function(json) {
        //create key for each object
        identifier = json["_links"].self;
        identifier = JSON.stringify(identifier);
        identifier = identifier.substr(identifier.lastIndexOf('/') + 1);
        identifier = identifier.slice(0, -1);

        // Add key/value pair to object
        info[username] = JSON.stringify(json);

        if (info[username].length < 400) {
          $('#' + username + ' .material-icons')
            .addClass('offline-icon')
            .html('portable_wifi_off');
        }
      }).always(function() {
        if (++finished === users.length)
          lastCheck();
      });
    })(i);
  }
});
@import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css');
@import url('http://fonts.googleapis.com/icon?family=Material+Icons');
 body {
  background-color: pink;
}
#app {
  margin-top: 50px;
  padding: 0;
}
.head {
  background-color: #ee6e73;
  padding: 15px
}
.head h1 {
  margin: 0;
  font-size: 43px;
  color: #fff;
  text-shadow: 0.012em 0.012em #ccc;
}
.collection,
.collection-item {
  border: none;
  border-bottom: none !important;
}
.collection-item > * {
  vertical-align: middle;
}
.collection-item img {
  height: 40px;
  margin-right: 5px;
}
.filter {
  background-color: #fff;
  padding: 0 !important;
}
.filter ul {
  margin: 0;
}
.filter ul li {
  border-top: 1px solid #eee;
}
img {
  border: 2px solid #ddd;
}
.offline-icon {
  color: #e53935;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="row">
  <div class="col m8 offset-m2 s12 z-depth-1" id="app">
    <div class="head">
      <h1>Twitch.tv Streamers</h1>
    </div>
    <ul class="tabs">
      <li class="tab col s3"><a class="active" href="#all">All</a></li>
      <li class="tab col s3"><a href="#online">Online</a></li>
      <li class="tab col s3"><a href="#offline">Offline</a></li>
    </ul>
    <div id="all" class="col s12 filter">
      <ul class="collection">
        <li class="collection-item" id="freecodecamp">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" alt="" class="circle">
          <span>FreeCodeCamp</span>
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="trymacs">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/trymacs-profile_image-3c2ac4643bab750a-300x300.jpeg" alt="" class="circle">
          <span>Trymacs</span>
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="phonecats">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/phonecats-profile_image-a536a337b2e58260-300x300.png" alt="" class="circle">
          <span>phonecats</span>
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <!--<li>Item <i class="material-icons">portable_wifi_off</i></li>
      <li>Item <i class="material-icons">wifi_tethering</i></li>
      <li>Item</li>-->
      </ul>
    </div>
    <div id="online" class="col s12 filter">
      <ul class="collection">

      </ul>
    </div>
    <div id="offline" class="col s12 filter">
      <ul class="collection">
		
      </ul>
    </div>
  </div>
</div>

答案 3 :(得分：0)

如果存在班级离线图标，则需要在所有选项卡和在线选项卡中显示可用选项。

1：一旦ajax调用的响应更新了元素类，就检查类。

2：在检查类时，添加一个额外的检查，如果li元素的id与标识符相同，这将避免导致相同的元素被追加两次。

＆＃13;
＆＃13; 
$(document).ready(function() {
  // Declare all variables
  var users = ["freecodecamp", "trymacs", "phonecats"];
  var info = {};
  var i;
  var identifier;

  for (i = 0; i < users.length; i++) {
    $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + users[i], function(json) {
      //create key for each object
      identifier = json["_links"].self;
      identifier = JSON.stringify(identifier);
      identifier = identifier.substr(identifier.lastIndexOf('/') + 1);
      identifier = identifier.slice(0, -1);

      // Add key/value pair to object
      info[identifier] = JSON.stringify(json);

      // Check if user is streaming using length of object
      if (info.freecodecamp && info.freecodecamp.length < 400) {
        $('#freecodecamp .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
      if (info.trymacs && info.trymacs.length < 400) {
        $('#trymacs .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }
      if (info.phonecats && info.phonecats.length < 400) {
        $('#phonecats .material-icons')
          .addClass('offline-icon')
          .html('portable_wifi_off');
      }

      // Filter content into online section
      $('#all ul li').each(function() {

        if ($(this).attr("id") ==  identifier && $(this).children('.material-icons').hasClass('offline-icon')) {
          $('#online ul').append($(this).clone());
        }
        
      });


    });



  }





});
＆＃13; 
body {
  background-color: pink;
}
#app {
  margin-top: 50px;
  padding: 0;
}
.head {
  background-color: #ee6e73;
  padding: 15px
}
.head h1 {
  margin: 0;
  font-size: 43px;
  color: #fff;
  text-shadow: 0.012em 0.012em #ccc;
}
.collection,
.collection-item {
  border: none;
  border-bottom: none !important;
}
.collection-item img {
  height: 40px
}
.filter {
  background-color: #fff;
  padding: 0 !important;
}
.filter ul {
  margin: 0;
}
.filter ul li {
  border-top: 1px solid #eee;
}
img {
  border: 2px solid #ddd;
}
.offline-icon {
  color: #e53935;
}
＆＃13; 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="row">
  <div class="col m8 offset-m2 s12 z-depth-1" id="app">
    <div class="head">
      <h1>Twitch.tv Streamers</h1>
    </div>
    <ul class="tabs">
      <li class="tab col s3"><a class="active" href="#all">All</a>
      </li>
      <li class="tab col s3"><a href="#online">Online</a>
      </li>
      <li class="tab col s3"><a href="#offline">Offline</a>
      </li>
    </ul>
    <div id="all" class="col s12 filter">
      <ul class="collection">

        <li class="collection-item" id="freecodecamp">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png" alt="" class="circle">FreeCodeCamp
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="trymacs">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/trymacs-profile_image-3c2ac4643bab750a-300x300.jpeg" alt="" class="circle">Trymacs
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <li class="collection-item" id="phonecats">
          <img src="https://static-cdn.jtvnw.net/jtv_user_pictures/phonecats-profile_image-a536a337b2e58260-300x300.png" alt="" class="circle">phonecats
          <i class="secondary-content material-icons">wifi_tethering</i>
        </li>
        <!--<li>Item <i class="material-icons">portable_wifi_off</i></li>
      <li>Item <i class="material-icons">wifi_tethering</i></li>
      <li>Item</li>-->
      </ul>
    </div>
    <div id="online" class="col s12 filter">
      <ul class="collection">

      </ul>
    </div>
    <div id="offline" class="col s12 filter">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题