並べ替えられていないリストの項目の数を数える方法。 JQuery

Question

私はStackOverflowコミュニティを初めて使っています！ 私はこのトピックを探していましたが、そのうちのいくつかでは、私が探しているものが長さで分かりましたが、私はそれを実現できません。

私のコードで何が乱雑である場合、私は私が謝罪、jQueryとJSにも新たなんです。

マイコード：

$('#btnComments').click(function() { 
    if ($('#commentArea').val() != "") { 
     var $newli = document.createElement('li'); 
     $newli.textContent = $('#commentArea').val(); 
     $('#listaDeComentarios').after($newli); 
     $('#commentArea').val(''); 
     var cantLiEnUl = $('#listaDeComentarios').length; 
     $newli.tagName = 'Comments[' + cantLiEnUl.toString() + ']'; 
    } 
}); 

私のコードの最初の部分で、私はただのTextAreaからテキストを取得していますし、コメント一覧に追加します。私がしようとしているのは、モデルのリストをポストしているため、適切なインデックスをliの名前に設定することです。各liにインデックスを付けないと、モデルのこのプロパティはnullになります値。

私はconsole.log（cantLiEnUl）を使って値の変更の仕方を知っていましたが、それは常に1でした。#listaDeComentariosは私のulのIDです。

何が十分に明確ではない場合、私はより良い自分自身を説明しようとすることでしょう。

ありがとうございます！

私は@Turnipについてのコメントを読んだ後、私が見つけました。

彼はコメントに返信し、ソリューションとしてそれをマークすることはできませんので、私はそれを投稿しています。私の問題は、長さは常にゼロになりますが、他の.afterの代わりに.append使用する必要があります.after

ました。実際にはulに李を追加していません。また、tagNameに値を代入することはできません - これは要素の '型'です。あなたのケースでは$ newli.tagNameは、 'LI'

感謝に等しいです！

Answer 1

私は野生の推測を取ると、あなたはこのような何かをしようとしていると仮定するつもりです：

$('#btnComments').click(function() { 
 
    if ($('#commentArea').val() != "") { 
 
     var $newli = document.createElement('li'); 
 
     $newli.textContent = $('#commentArea').val(); 
 

 
     /** 
 
     * Use `.append` not `.after`... 
 
     */ 
 
     $('#listaDeComentarios').append($newli); 
 
     $('#commentArea').val(''); 
 
     
 
     /** 
 
     * Check the length of the `li` not the `ul`... 
 
     */ 
 
     var cantLiEnUl = $('#listaDeComentarios li').length; 
 
     
 
     /** 
 
     * Replace 'data-myData' with whatever attribute you are wanting to set... 
 
     */ 
 
     $($newli).attr('data-myData', 'Comments[' + cantLiEnUl.toString() + ']'); 
 
    } 
 
});

#listaDeComentarios li:after { 
 
    content: ' - ' attr(data-myData); 
 
    color: red; 
 
}

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

 
<textarea id="commentArea" placeholder="Enter some text..."></textarea> 
 
<br> 
 
<button id="btnComments"> 
 
Click 
 
</button> 
 

 
<ul id="listaDeComentarios"> 
 

 
</ul>