Question

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

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

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

因为.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 2

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

这会将字符串附加到选择器选择的DOM元素的innerHTML

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);

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

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

4 个答案: