Django-Jquery 循环遍历所有选项

Posted 2023-02-24

【中文标题】Django-Jquery 循环遍历所有选项

【英文标题】：Django- Jquery loops through all options

【发布时间】：2016-12-02 09:41:00

【问题描述】：

我在 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 中我选择所需的值

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

但不是给我一个单一的值，而是我从 DB 获得的所有值。

点击<li>时如何只得到一个值

获取选定值的任何帮助都会有所帮助

【问题讨论】：

***.com/questions/6276835/… 。也可以参考***.com/questions/27523379/…

【参考方案1】：

首先，每个 HTML 元素的 id 应该是唯一的。您正在创建多个具有相同 ID 的 li 和 span 元素。确保它是唯一的，以防止出现不需要的错误。如果需要，最好使用类和数据属性。

其次，需要获取选中元素的文本，不是任何元素，所以需要使用this：

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

【参考方案2】：

在您的模板中，您为每个 <span> 元素赋予了相同的标识符 (item_cat_name)。您的第二个 jQuery 选择器选择具有该标识符的所有 <span> 元素。

要解决这个问题，请将您的 jQuery 更改为：

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

这只会在点击的<li> 元素正下方显示<span> 元素的文本（使用$(this) 是这里的关键）。

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