javascript - 列出使用 jQuery 检查的变量值

Question

我在 jsFiddle 中已经取得了相当大的进展，但我无法弄清楚为什么它没有在第一个值中添加项目符号..

http://jsfiddle.net/dvCmR/128/

<div id="checkboxes">
    <input id="chkbx_0" type="checkbox" name="one" />Option 1
    <input id="chkbx_1" type="checkbox" name="two" />Option 2
    <input id="chkbx_2" type="checkbox" name="three" />Option 3
    <input id="chkbx_3" type="checkbox" name="four" />Option 4
</div>

<div class="content"></div>

<script>
    $("input").click(function(e) {

    var selected = $("#checkboxes input:checked").map(function(i, el) {
        return el.name;
    }).get();

    $('.content').empty();

    $(".content").append(selected.join("<li>"));

});
</script>

​</p>

谢谢！！！

Answer 1

该.join()函数仅将字符串放在元素之间。结果是

 name1<li>name2<li>name3

当你需要时

 <li>name1<li>name2<li>name3

此外，将<li>元素放入 a<div>是非常值得怀疑的。

您仍然可以使用，但是当（在连接之后）它不为空时.join()，您应该在结果字符串的开头添加另一个。<li>

Answer 2

正如@Pointy 所说，当你有一个元素时join不会添加。li此外，您根本不需要使用join，只需使用单个循环添加元素：

$("input").click(function(e) {
    var $content = $('.content').empty();
    $("#checkboxes input:checked").each(function(i, el) {
       $("<li>" + el.name + "</li>").appendTo($content);
    });
});​

演示。

Answer 3

试试这个：

$("input").click(function(e) {
    var selected = $("#checkboxes input:checked").map(function(i, el) {
        return "<li>"+el.name+"</li>"
    }).get();
    $(".content").html(selected.join(""));
});

小提琴