Question

我正在尝试使用jQuery订购一些div。它们是使用JSON从Google Sheet中使用jQuery创建的。

当我运行函数订购div时，为什么内容会消失？是因为内容最初是用jQuery创建的吗？

HTML

Sort by

<select id="myselect">
  <option value="distance">Distance</option>
  <option value="atoz">A to Z</option>
</select>

<div id="list"></div>

的jQuery

// Add content from Google Sheet

$.getJSON('http://cors.io/?u=https://spreadsheets.google.com/feeds/list/1pksFEATRRWfOU27kylZ1WLBJIC-pMVxKk9YlCcDG0Kk/od6/public/values?alt=json', function(data) {
  $.each(data.feed.entry, function(i, v) {
    var url = v.gsx$url.$t;
    var shortUrl = url.replace('http://', '');
    var data = $('<div class="listing" data-listing-name="' + v.gsx$name.$t + '" data-listing-distance="' + v.gsx$distance.$t + '">').append('<img src="' + v.gsx$image.$t + '" id="image"/><h4 id="bandb">' + v.gsx$name.$t + '</h4><a href="' + v.gsx$url.$t + '" id="link">' + shortUrl + '</a><p id="description">' + v.gsx$description.$t + '</p>');
    $('#list').append(data);
  });

});

// Sort by distance

$(document).ready(function() {

  var distance = $(".listing");
  distance.sort(function(a, b) {
    return $(a).data("listing-distance") - $(b).data("listing-distance")
  });

  var atoz = $(".listing");
  atoz.sort(function(a, b) {
    return $(a).data("listing-name") - $(b).data("listing-name")
  });

  $("#myselect").on("change", function() {
    if ($("#myselect option:selected").text() == "A to Z") {
      $("#list").html(atoz);
    } else {
      $("#list").html(distance);
    }
  });

  $("#list").html(distance);
});

Answer 1

你有

$("#list").html(distance);

正如你上次发表的声明。如果你检查JQuery documentation这意味着你知道这个statemtnt期望html作为输入，并将覆盖整个元素内容。所以，一旦agina你在做什么：

将元素添加到具有ID列表的容器
做一些订购代码。（这实际上只对数组中的元素进行排序，不要在容器内重新排序。
然后你做上面提到的代码 - 用字符串表示od对象距离覆盖列表容器的内容，但是对象距离的字符串表示与html不同 - 这正是一切都消失的原因。

您可以使用以下内容解决此问题：

distance.each(function(i, e) {
    $("#list").append(e);
});

这会占用每个元素，并将其放在容器的末尾，ID为“list”，基本上重新排序它们。

P.S。：正如评论中所指出的那样 - 你应该改变你的代码以确保它在你将数据加载为document.ready事件之前可能被执行之后执行 - 所以可以将代码重新排序到事件处理函数中。

如何使用jQuery操作使用jQuery创建的元素？

1 个答案: