Question

我正在编写一个脚本，通过LinkedIn api显示公司的状态更新。该脚本可以正常工作，但我无法使生成的列表项显示在<ul></ul>标记内。现在我的代码是这样的：

<script type="text/javascript" src="https://platform.linkedin.com/in.js">
  api_key: my_client_id
  onLoad: onLinkedInLoad
  authorize: true 
</script>
<script type="text/javascript">
function onLinkedInLoad() {
  IN.Event.on(IN, "auth", onLinkedInAuth);
}

function onLinkedInAuth() {
  var cpnyID = 2414183; //LinkedIn's testDevCo
  IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=20&format=json")
    .result(displayCompanyUpdates);
}

function displayCompanyUpdates(result) {
  var div = document.getElementById("displayUpdates");

  div.innerHTML = "<ul>";

  var resValues = result.values;
  for (var i in resValues) {

    var share = resValues[i].updateContent.companyStatusUpdate.share;
    var content = share.content;
    var isTitled = content,
      isLinked = content,
      isDescription = content,
      isThumbnail = content;

    if (isTitled) {
      var title = share.content.title;
    } else {
      var title = "Custom title";
    }

    if (isLinked) {
      var link = share.content.shortenedUrl;
    } else {
      var link = "#";
    }

    if (isDescription) {
      var description = isDescription.description;
    } else {
      var description = "No description";
    }

    if (isThumbnail) {
      var thumbnailUrl = share.content.thumbnailUrl;
    } else {
      var thumbnailUrl = "http://placehold.it/60x60";
    }

    if (share) {
      var content = "<a target='_blank' href=" + link + ">" + title + "</a><br>" + description;
      div.innerHTML += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";
    }
    console.log(share);
  }

  div.innerHTML += "</ul>";
}
</script>

它会生成这个html：

<div id="displayUpdates">
    <ul></ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</div>

为了获取ul中的列表项，我需要更改什么？使用jQuery可以更轻松地完成这项工作吗？

Answer 1

我会说这是一个正确的结果，因为您使用innerHTML替换现有内容，尽管您使用+=附加了该内容但是当您执行此操作div.innerHTML = "<ul>";时有一个打开的ul，当它找不到它的后代时，会自动关闭它。

只有在循环停止时才应使用innerHTML：

function displayCompanyUpdates(result) {
  var div = document.getElementById("displayUpdates");

  var el = "<ul>"; // <----open a ul here

  var resValues = result.values;
  for (var i in resValues) {

    var share = resValues[i].updateContent.companyStatusUpdate.share;
    var content = share.content;
    var isTitled = content,
      isLinked = content,
      isDescription = content,
      isThumbnail = content;

    if (isTitled) {
      var title = share.content.title;
    } else {
      var title = "Custom title";
    }

    if (isLinked) {
      var link = share.content.shortenedUrl;
    } else {
      var link = "#";
    }

    if (isDescription) {
      var description = isDescription.description;
    } else {
      var description = "No description";
    }

    if (isThumbnail) {
      var thumbnailUrl = share.content.thumbnailUrl;
    } else {
      var thumbnailUrl = "http://placehold.it/60x60";
    }

    if (share) {
      var content = "<a target='_blank' href=" + link + ">" + title + "</a><br>" + description;
     el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>"; // add list items
    }
    console.log(share);
  }

  el += "</ul>"; /// <------close the ul here

  div.innerHTML = el; // <------here
}

Answer 2

如果你想在原始Javascript中这样做，你可以通过创建每个父元素并更改子元素的内部HTML来实现，例如：

var div = document.getElementById("displayUpdates");
var ul = document.createElement("ul");
var resValues = result.values;
for (var i in resValues) {
    var li = document.createElement("li");
    // populate innerHTML of "li"
    ul.appendChild(li);
}
div.appendChild(ul);

在for循环中添加innerHTML以生成列表

2 个答案: