【问题标题】:Format integer thousands separator throughout the document在整个文档中格式化整数千位分隔符
【发布时间】:2016-11-09 15:22:42
【问题描述】:

经过数月的网络开发,我发现自己完全无助地试图为一个简单的问题找到一个好的解决方案,即按照我的意愿格式化整个 DOM 中的所有数字。具体来说,我有一个 js 函数 my_int_formatter(),我想在加载文档后将其应用于所有整数。最好的例子描述 - 我想做类似的事情

<td>my_int_formatter({{django_variable}})</td>

我知道上面的代码行不通,因为我必须包含'script'标签,但首先,我不喜欢乱七八糟的代码,其次,javascript无法识别python变量

我尝试了以下方法:

HTML

<td class = 'my_integer'>{{django_variable}}</td>

JS

$(document).ready(function(){
   // ....
   content = $('.my_integer').html();
   $('.my_integer').html(my_int_formatter(content));

...但正如预期的那样,我得到了错误的结果,因为 js 代码将 DOM 链中第一个 .my_integer 元素的相同 html() 内容应用于所有其他元素。任何想法如何以简短而正确的方式做到这一点?

【问题讨论】:

    标签: javascript jquery django


    【解决方案1】:

    如果我理解正确,您的问题不在于格式,而是实际上将格式应用于您的每个 dom 元素。

    尝试使用 jquerys .each() 函数并使用 $(this).html() 来实际抓取内容。

    $('.my_integer').each(function(){
        content = $(this).html();
      $(this).html(content+"formatted");
    });
    

    这是一个快速的小提琴:

    https://jsfiddle.net/57rdq2a0/2/

    【讨论】:

    • Starbug,我已将 valentjedi 的答案标记为解决方案,因为通过他的方法,您不必遍历整个 DOM。我想知道,如果您有大型站点,以这种方式循环有多贵
    • 是的,后来我注意到了他的回复。做服务器端的操作要好得多(我从来没有真正接触过 Django,所以在那里帮不上忙)。 Jquery 的 each() 在大型站点上可能很重,这就是为什么在 JS 中搜索 ID 而不是类总是更好的原因。祝你好运^^
    【解决方案2】:

    如果我理解正确,你想使用内置 django.contrib.humanize 应用程序:https://docs.djangoproject.com/en/1.9/ref/contrib/humanize/

    您可以使用一些预定义的过滤器来格式化整数,例如intcomma

    4500 becomes 4,500.
    45000 becomes 45,000.
    450000 becomes 450,000.
    4500000 becomes 4,500,000.
    

    在你的情况下使用就像

    {% load humanize %}
    <td>{{django_variable|intcomma}}</td>
    

    也不要忘记在INSTALLED_APPS 中包含应用程序

    另外this问题可能有用

    如果您想对某种类型的所有变量应用过滤器,我建议您在渲染前使用Middleware 来处理响应。

    【讨论】:

    • 太棒了!我再次低估了Django并寻找解决方案客户端,这就是为什么你提到的问题没有引起我的注意))
    • 有没有办法告诉 Django 将此格式应用于所有整数,除非另有明确说明?
    • @Edgar Navasardyan 我建议使用中间件。请参阅文档链接的答案更新
    猜你喜欢
    • 2016-10-03
    • 1970-01-01
    • 2018-01-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-28
    相关资源
    最近更新 更多