0

テキスト入力にドロップダウンメニューを追加しています。性別は男性で、女性です。これを私の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();

})

ここにフィドルがあります：

フィドルを訪ねる

ここで何が問題なのですか？

4

1 に答える 1

4

違いを見つけてください ;=)

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

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

ブラウザーは「ナイス」で、閉じられていない li タグを、ループの反復ごとに 2 つずつ自動的に閉じました。

于 2012-05-28T13:54:07.280 に答える