Question

我正在使用jQuery自动在页面面板中显示动态内容。每个面板都有一个与％编号关联的进度栏。

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

有一个onyl

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

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

问题是jQuery创建的div数量与显示面板一样多（这意味着它会进入我的方法和append()）。

需要明确的是，如果我显示10个面板，则每个progress-bar将有10个孩子添加了.append（因此还有9个孩子显然没用）。您在上面的图片中看到它们被红色包围

我不明白为什么each()无法正常工作

$(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}"}
//Here is where the "label-text" <div> is created with jQuery

为什么尽管我使用.each（），但多次出现.append（）？

0 个答案: