Question

我正在构建一个Web应用程序，它是按年份排序的数据的直观表示，并且目前在html中有一个有序的年份列表，即：

<ol id="years">
    <li>1900</li>
    <li>1901</li>
    <li>1902</li>

...

    <li>1950</li>
</ol>

我希望列表是通过javascript在页面加载时自动生成的，因为年份范围可能会随着时间的推移而发生变化，我不想让javascript和HTML失去同步的风险。

对于其他功能，我已经声明变量firstYear和lastYear与该列表中的第一个和最后一个项目匹配，即：

var firstYear = 1900;
var lastYear = 1950;

我试图将一些代码建立在类似于a similar question的代码上，但还没有弄清楚如何根据我的应用程序的要求正确调整它。

如果有人可以帮我写这个功能来做这件事，我们将不胜感激。

Answer 1

试试这个：

var firstYear = 1900;
var lastYear = 1950;
for(var i =firstYear; i<=lastYear; i++) {
       $('#years').append('<li>'+i+'</li>')
}

Answer 2

for(var y=1900; y <= 1950; ++y) 
    $('#years').append('<li>' + y + '</li>');

看到在这里跑：http://jsfiddle.net/qDAVA/4/

Answer 3

$(document).ready(function() {
  var firstYear = 1900;
  var lastYear = 1950;

  for (var i = firstYear; i++; i <= lastYear) {
    $('<li>' + i + '</li>').appendTo('ol#years');
  }
});

Answer 4

你的意思是你想在开始和停止年之间产生年数吗？

<ul id='years'>
</ul>

var startYear = 1950;
var endYear = 1965;

var $years = $('#years');
for (var i = startYear; i <= endYear; i++) {
    $years.append('<li>' + i + '</li>');
}

Answer 5

你可以这样做

function createYearList(start, end){
    var ul = $('<ul>').appendTo('body');

    for (i = start; i <= end; i++)
    {
        $('<li>').html(i).appendTo(ul);
    }
}

$(document).ready(function(){
    createYearList(1900, 1950);
});

演示：http://jsfiddle.net/ynhat/ngmNF/

使用JQuery为每年创建一个列表项

5 个答案: