将数据属性添加到附加对象src

Question

我想将链接附加到多个列表项，该链接将数据属性传递到URL的末尾。 但是我不明白如何为每个.Story实例使变量“ storyId”保持不同的值

<div id="InnerPage">
  <ol>
    <li class="Story" data-id="35213">Text for Link 1 </li>
    <li class="Story" data-id="35204">Text for Link 2 </li>
  </ol>
</div>

<script>
  var storyId = this.getAttribute('data-id');
  var sidebarURL = "'index.html?storyid=' + storyId"
  var newA = document.createElement('a');
  newA.setAttribute('href',sidebarURL);
  newA.innerHTML = "Split View";

  $('.Story').append([newA]);
</script>

应导致：

<div id="InnerPage">
  <ol>
    <li class="Story" data-id="35213">Text for Link 1 <a href="index.html?storyid=35213">Split View</a></li>
    <li class="Story" data-id="35204">Text for Link 2 <a href="index.html?storyid=35204">Split View</a></li>
  </ol>
</div>

http://jsfiddle.net/s3wtsxw5/

Answer 1

你可以做：

$("#InnerPage ol li").each(function() {
    var id = $(this).data("id");
    var link = "index.html?storyid=" + id;
    $(this).append("<a href='" + link + "'>Split View</a>");
});