動的に作成されたdivを1つずつ表示する

Question

私は動的に作成されたliを1つずつ表示しようとしています。ここに私のコードです。なぜこのような何かがうまくいかないのではないか？

$('form').submit(function(e) { 
 
    e.preventDefault(); 
 
    var userInput = $('#inputNumber').val(); 
 
    console.log(outputResult); 
 
    var modifiedResult = outputResult.map(function(item) { 
 
    return '<li class="ball">' + item + '</li>' 
 
    }); 
 
    $('.output').html(modifiedResult.join("")); 
 
    $('.ball').each(function(i, e) { 
 
    $(this).delay(i * 400).fadeIn(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="output"></ul>

Answer 1

あなたは$('.output').html(modifiedResult.join(""));liの操作を行うと（displayプロパティがデフォルトでblockです）すでに表示されています。

それはあなたが#map()機能で作成HTML文字列でstyle="display:none"を追加するために十分であろう - 以下のデモを参照してください。あなたが最初に作成したユーザーdisplay:none後fadeInにしたい場合は

var userInput = $('#inputNumber').val(); 
 
var outputResult = [1,2,3,4,5]; 
 
var modifiedResult = outputResult.map(function(item) { 
 
    return '<li style="display:none" class="ball">' + item + '</li>' 
 
}); 
 
$('.output').html(modifiedResult.join("")); 
 
$('.ball').each(function(i, e) { 
 
    $(this).delay(i * 400).fadeIn(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="output"></ul>

Answer 2

を。

$('#submit').click(function(e) { 
 
    e.preventDefault(); 
 
    var userInput = 5; 
 
    var outputResult = [1, 2, 3, 4, 5]; 
 
    console.log(outputResult); 
 
    var modifiedResult = outputResult.map(function(item) { 
 
    return '<li style="display:none" class="ball">' + item + '</li>' 
 
    }); 
 
    $('.output').html(modifiedResult.join("")); 
 
    $('.ball').each(function(i, e) { 
 
    debugger; 
 
    $(this).delay(i * 400).fadeIn(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul class="output"></ul> 
 

 
<input id="submit" type="button" value="submit" />