Djangoのすべてのオプションを使用したDjango- Jqueryループ

Question

Djangoの助けを借りてサーバー側のレンダリングを行っています。私のDjangoテンプレートでは、私のデータベースから得られたすべての値をループしています。単一の値を選択しながらjqueryのでは、JSは私に、データベースから取得したすべての値が得られますが、私はjqueryのイムで値

Views.py

def theme(request): 
    context={} 
    context['All']=Theme.objects.all().count() 

    for t in ThemeCategory.objects.all(): 
     context[t.categoryName]= t.theme_set.count() 

    context=collections.OrderedDict(sorted(context.items())) 
    return render(request,'theme-list.html',{'category_name':context}) 

テンプレートで

<ul class="pick-tags" > 
    {% for category_name,count in category_name.items %} 
     <li id="item_cat"> 
      <span id="item_cat_name">{{ category_name }}</span> 
     </li> 
    {% endfor %} 
</ul> 

を選択wantedが必要な値を選択する

$('li#item_cat').on('click', function() { 
    alert($('span#item_cat_name').text()) 
}) 

私に単一の値を与える代わりに、それは私のDBから得られたすべての値です。 <li>

をクリック選択した値を得るために任意のヘルプは、すべての

Answer 1

まず参考になるとき

私は一つの値だけを取得する必要がありますどのように、各HTML要素のIDは一意である必要があります。同じidを持つ複数のliとspan要素を作成しています。望ましくないバグを防ぐために、それが一意であることを確認してください。必要に応じてクラス属性とデータ属性を使用する方がよいでしょう。

あなたがthisを使用する必要があるので、第二に、あなたは、選択された要素ではなく、任意の要素のテキストを取得する必要があります。

$(this).find('span').text() 

Answer 2

テンプレートでは、あなたはすべての<span>要素に同じ識別子（item_cat_nameを与えています）。 2番目のjQueryセレクタは、その識別子を持つすべての<span>要素を選択します。これが唯一の直接クリック<li>要素（$(this)を使用すると、ここで重要である）の下に<span>要素のテキストを表示します

$('li').on('click', function() { 
    alert($(this).children('span').text()) 
}); 

：ような何かにあなたのjQueryを変更、この問題を解決するには

。

また、すべての<span>要素に一意の識別子を付けることをお勧めします。 ThemeCategoryの主キー。その上にあなたのさらなる行動の基盤となることができます。