javascript - 为什么我的 map 函数另外添加 2 个空的 'li' ？

Question

我在文本输入上附加一个下拉菜单，我的性别是男性，女性，我只是在它获得焦点时将其添加到我的 li 中。但我的焦点上另外出现了 2 个空的 li。为什么？

这是我的代码:

$(document).ready(function(){

  var  gender = ['Female','Male'],
      genderField = $('#gender');

   var genderUpdate= function(){
            genderField.focus(function(){
                if(!$('#genderList').length){
                    var topPos = $(this).position().top,lftPos = $(this).position().left;
                    $('<ul id="genderList"></ul>').css({
                        position    :'absolute',
                        top         : topPos,
                        left        : lftPos
                    }).appendTo($(this).parent());


                    $.map(gender,function(val,i){
                        $('<li>'+val+'<li>').appendTo('#genderList');
                        console.log('append');
                    })

                }


            })
        }

                        genderUpdate();

})

这是 fiddle :

visit the fiddle

这里出了什么问题？

Answer 1

找出差异;=)

$('<li>'+val+'<li>').appendTo('#genderList');

$('<li>'+val+'</li>').appendTo('#genderList');

浏览器“很好”，会自动关闭未关闭的 li 标签，循环的每次迭代都会关闭两个标签。