Question

我正在使用jQuery在页面加载时自动在页面的每个面板中显示动态内容。

我正在使用each()和append()添加div并为每个面板注入内容。

问题在于jQuery创建的div数量与显示面板的数量相同，这意味着它进入我的方法的次数和append()的次数与显示面板的次数相同。我不明白为什么each()无法正常工作。

要清楚，如果我显示十个面板，则每个面板将有十个孩子添加了append，因此有九个孩子没有用。

$(document).ready(function() {
  $('.progress-bar').each(function() {
    var t = $(this);
    var barPercentage = t.data('percentage');
    var barContent = t.data('content');

    // add a div for the label text
    t.children('.label').append('<div class="label-text"></div>');

    // add some "gimme" percentage when data-percentage is <2
    if (parseInt((t.data('percentage')), 10) < 2) 
      barPercentage = 2;

    // set up the left/right label flipping
    if (barPercentage > 50) {
      t.children('.label').css("right", (100 - barPercentage) + '%');
      t.children('.label').css("margin-right", "-10px");
    }
  }

另外，这是我的HTML：

%div{class: "progress-bar", "data-percentage" => "#{number.to_i >= 100 ? '100' : number.to_i }", "data-content" => "#{label_content}", style:"background: white;"}
                  - if number.present?  &&  number.to_i != 0
                    %div{class: "bar", style: "background: #{color};"}
                      %span{style: "background: #{color};"}
                    %div{class: "label", style: "background: #{color}; border: 1px solid #{color}"}

注意：此progress-bar是我显示的panels的一部分。 panel只有一个。

这是情况的图片： https://image.noelshack.com/fichiers/2019/26/2/1561482314-panel.jpg

使用each（）时如何不多次追加（）

0 个答案: