動的に追加された要素のクラス名を数える方法

Question

動的に追加された要素のClassNamesをカウントしようとするときに覚えておく必要があることはありますか？

以下の説明については、リンクを参照してください。いずれかのセメスターの「（+）コース」ボタン（動的に追加されたボタン）をクリックすると、コースは、それ自身のボタンで、対応するセメスターに追加されます。これは機能します。しかし、私は学期のために持っているのと同じように、各要素の数はどれくらいであるか（すなわち、合計5学期、1学期7科目）に制限がありますが、コースを数えることができないようです。

各セメスターには、セメスターのIDと「コース」という単語を連結した「コース＃4コース」という独自のクラス名があります。このコードスニペットは、各コースのClassNamesをアセンブルしてカウントする方法です。何か問題がありますか？残りのコードをリンクに添付しました。

var parentId = $(this).parent().attr('id'); 
var crsClass = parentId+"Course"; 
var crsCount = $('.'+crsClass).length; 

https://jsfiddle.net/4efzf681/2/

私はそう私と一緒に負担してください、先週のJavaScript/jQueryのを学び始めました。 HTML、CSS、JavaScriptの間でコードを分離しないことをお詫び申し上げます。私は1つのファイルで作業し、完成時にそれを分けています。私はどんな助けにも感謝します。

Answer 1

あなたのクラス名で#文字がsem#1とsem#1Courseがクラス.semとID#1か#1Courseを見$()クエリセレクタのための問題を作成している値。クラス名とIDに#と.の文字を使用しない方が良いです。代わりにハイフンとアンダースコアを使用してください。

改善フィドルはここにある：https://jsfiddle.net/6pdfjbt1/は

Answer 2

あなたのコースクラス名に親のid属性を追加すると、jQueryのセレクタエンジンが混乱します。クラスは#を入力します.jqueryは要素をidで選択したいと思っていると思います。

は

var crsClass = parentId.replace("#", "")+"Course";

を行うことで、私はあなたのフィドルを固定することを変更しました。次回は下のウィンドウにjsを入れてください）。 crsCount変数を下に移動して、コースがDOMに追加された後に値を割り当てました。

YOUR FIDDLE

Answer 3

あなたはjavascriptの方法あなたが `crsClass`クラスを持っている要素の数をカウントするgetElementsByClassName

var crsCount = document.getElementsByClassName(crsClass).length;