Jquery 每个循环仅显示第一个值

我正在尝试创建一个动态导航栏。但目前它只列出了第一个li，即使我输入了超过1个

    var liCount = $('.navLiName').length;
    var liName = $('.navLiName').val();

    for($i = 0; $i < liCount; $i++){
        var lis = '<li class="pi-nav-li">'+liName+'</li>';
    }

    $('.preview').append('<nav class="pi-nav">'+lis+'</nav>');

var-liCount=$（'.navLiName'）.length；
var liName=$（'.navLiName'）.val（）；
对于（$i=0；$i'；
}
$（'.preview'）.append（''+lis+''）；

这是html

<input type="text" class="navLiName" /> 
<input type="text" class="navLiName" />
<input type="text" class="navLiName" />

因此，当我输入上面的文本字段：“关于”、“服务”和“联系人”时，它会像这样输出

<nav>
<li>About</li>
</nav>

关于

但应该是这样。我做错了什么

<nav>
<li>About</li>
<li>Service</li> 
<li>Contact</li>
</nav>

关于
服务
接触

每次循环运行时都会覆盖$lis，而不是追加。 而$liName只保存第一个列表名的结果，它从不获取其他列表名。

var liCount=$（'.navLiName'）.length；
var liCount = $('.navLiName').length;
for( var i = 0; i < liCount; i++){
    var loopLi= $('.navLiName')[i];
    alert ($(loopLi).val());
}

对于（变量i=0；i

请看下面的示例，因为它与您的需求相关。