Django Jquery循环遍历所有选项

Question

我在Django的帮助下做服务器端呈现。在django模板中，我循环遍历从数据库获得的所有值。在jquery中，当选择单个值时，JS给出了从数据库获得的所有值，但我只想要选择的值。

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>

在jquery中，Im选择所需的值

$('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)。第二个jQuery选择器选择带有该标识符的所有<span>元素。

若要解决此问题，请将jQuery更改为如下所示：

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

这将只显示<span>元素的文本，直接位于单击的<li>元素下面(这里的关键是使用$(this) )。

另外，我建议给每个<span>元素一个唯一的标识符，例如ThemeCategory的主键；这样您就可以在此基础上进行进一步的操作。