正确的信息控制台/警报，不会输出到html，虽然

Question

我正在使用.each()来获得一组lis。获取组（li）数据后，从当年减去它，然后控制数量。然后，我想将它传递给if语句，如果它等于或小于2，则为每个语句打印一个星号。

现在它可以正确地进行控制台和警报，但是当我尝试使用.html("*")打印明星时，它只打印一个明星。

这是JSFiddle。

HTML

<ul> 
    <li data-year="2012">One</li> 
    <li data-year="1984">Two</li> 
    <li data-year="2009">Three</li> 
    <li data-year="2014">Four</li> 
    <li data-year="2014">Five</li> 
    <li data-year="2014">Six</li> 
    <li data-year="2003">Seven</li> 
    <li data-year="2002">Eight</li> 
    <li data-year="2014">Nine</li> 
    <li data-year="2014">Ten</li> 
</ul> 

<div id="stars"></div> 

使用Javascript/jQuery的

var mem = $("li"); 
var year = new Date().getFullYear(); 

mem.each(function() { 
    var stay = $(this).data('year'); 
    var amount = year - stay; 
    console.log(amount); 

    if(amount <= 2) { 
     console.log("I am less than or equal to two: " + amount); 
     $('#stars').html("*"); 
    } 
}); 

Answer 1

替换为$('#stars').html('*');$('#stars')[0].innerHTML += '*';

这将字符串追加到DOM元素的innerHTML，你的选择器选择

Answer 2

这是因为.html()将覆盖现有的HTML - 创建一个变量，追加*它，然后加上一句：

var stars = ""; 
mem.each(function() { 
    var stay = $(this).data('year'); 
    var amount = year - stay; 
    console.log(amount); 

    if(amount <= 2) { 
     console.log("I am less than or equal to two: " + amount); 
     stars += "*" 
    } 
}); 

$('#stars').html(stars); 

Answer 3

每次调用

$('#stars').html("*");

你有效地更换时间文字在星星的开启/关闭标签之间。

您可能要做到这一点：

var currentHTML = $('#stars').html(); 
$('#stars').html(currentHTML + "*"); 

Answer 4

var mem = $("li"); 
var year = new Date().getFullYear(); 
var stars =""; 
mem.each(function() { 
    var stay = $(this).data('year'); 
    var amount = year - stay; 
    console.log(amount); 
    if(amount <= 2) { 
     //console.log("I am less than or equal to two: " + amount); 
     stars ="*"+stars; 
    } 
}); 
$('#stars').append(stars); 

使用追加添加到先前的内容