遍历数组以使用data-attribute来样式元素，但只获取数组中的最后一个值

Objective

• I'm trying to style a series of divs .table__color where the width of the div is equal to the value of a data-attribute from an array of .table__pct elements.
• 我正在尝试设计一系列div .table__color，其中div的宽度等于.table__pct元素数组中数据属性的值。
• So, if the value of the data-attribute is 59, then the width of the .table__color div is 59%, giving the appearance of a horizontal bar chart.
• 因此，如果数据属性的值为59，那么.table__color div的宽度为59%，显示水平条形图的外观。

Problem

• Right now, the width of all the .table__color bars are the same, because I'm only able to get the last item in the array and as a result the width of all the divs is 59%
• 现在，所有。table__color条的宽度都是一样的，因为我只能得到数组中的最后一项结果是所有div的宽度是59%

scripts.js

// Target all the elements with a class of `table__pct` that contain a data-attribute. The value of the data-attribute will be used to later determine the width of the `.table__color` bar
var bar = $(".table__pct");

// Use .map to create a new array that is just the data-attribute
var barWidthData = $('.table__pct').map(function () {
  return $(this).attr("data-attribute");
});

// Loop over the array and style the width of `.table__color` based on the value of the data-attribute from the array
for (var i=0; i < barWidthData.length; i++){
    $(".table__color").css("width", barWidthData[i] + "%");
}

index.html

<div class="table">
            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">This company operates by strong values and ethics</p>
                    <p class="table__pct" data-attribute="85.1">85.1%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My manager cares about my concerns</p>
                    <p class="table__pct" data-attribute="82.4">82.4%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My manager makes it easier to do my job well</p>
                    <p class="table__pct" data-attribute="81.9">81.9%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My job makes me feel like I am part of something meaningful
                    <p class="table__pct" data-attribute="81.4">81.4%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I feel genuinely appreciated at this company</p>
                    <p class="table__pct" data-attribute="81.4">81.4%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I have confidence in the leader of this company</p>
                    <p class="table__pct" data-attribute="80.7">80.7%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <!-- Check this -->
            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I have the flexibility I need to balance my work personal life</p>
                    <p class="table__pct" data-attribute="80.6">80.6%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">This company motivates me to give my very best at work</p>
                    <p class="table__pct" data-attribute="80.4">80.4%</p>
                </div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I would highly recommend working at this company to others</p>>
                    <p class="table__pct" data-attribute="79.8">79.8%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">New ideas are encouraged at this company</p>
                    <p class="table__pct" data-attribute="78.4">78.4%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I believe this company is going in the right direction</p>
                    <p class="table__pct" data-attribute="78.2">78.2%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My manager helps me learn and grow</p>
                    <p class="table__pct" data-attribute="78.1">78.1%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">This company enables me to work at my full potential</p>
                    <p class="table__pct" data-attribute="76.2">76.2%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">This company encourages different points of view</p>
                    <p class="table__pct" data-attribute="74.1">74.1%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">This job has met or exceeded the expectations I had when started</p>
                    <p class="table__pct" data-attribute="73.6">73.6%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">At this company, we do things efficiently and well</p>
                    <p class="table__pct" data-attribute="70.9">70.9%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I get the formal training I want for my career</p>
                    <p class="table__pct" data-attribute="69">69.0%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">There is good inter-departmental cooperation at this company</p>
                    <p class="table__pct" data-attribute="68.1">68.1%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I feel well-informed about important decisions this company</p>
                    <p class="table__pct" data-attribute="66.6">66.6%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">Senior managers understand what is really happening at the company</p>
                    <p class="table__pct" data-attribute="66.4">66.4%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My benefits package is good compared to others in the industry</p>
                    <p class="table__pct" data-attribute="64.9">64.9%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">My pay is fair for the work I do</p>
                    <p class="table__pct" data-attribute="63.8">63.8%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">I have not considered searching for a better job in the past month</p>
                    <p class="table__pct" data-attribute="62.6">62.6%</p>
                </div>

                <div class="table__color"></div>
            </div>

            <div class="table__row">
                <div class="table__row--inner">
                    <p class="table__statement">There is not a lot of negativity at my workplace</p>
                    <p class="table__pct" data-attribute="59">59.0%</p>
                </div>

                <div class="table__color"></div>
            </div>
        </div>

style.css

.table__row {
    border-bottom: 1px solid black;
    font-family: "Open Sans";
    font-size: 16px;
}

.table__row {
    position: relative;
}

.table__row--inner {
    padding-left: 16px;
    padding-right: 16px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.table__color {
    background: #FFCB50;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
}

.table__statement {
    font-weight: 700;
}

1 个解决方案

#1

You can loop through all divs and for each of them add the width, here's an example:

你可以对所有div进行循环，对每个div添加宽度，这里有一个例子:

$(".table__color").each(function(index) {
   $(this).css("width", barWidthData[index] + "%");
});

But a more intelligent and beautiful way to do it, using only the .css() method, as @Andreas commented:

但是有一种更智能、更漂亮的方法，只需使用.css()方法，@Andreas评论道:

$(".table__color").css("width", function(idx) {
  return barWidthData[idx] + "%";
});

// Target all the elements with a class of `table__pct` that contain a data-attribute. The value of the data-attribute will be used to later determine the width of the `.table__color` bar
var bar = $(".table__pct");

// Use .map to create a new array that is just the data-attribute
var barWidthData = $('.table__pct').map(function() {
  return $(this).attr("data-attribute");
});

// Loop over the array and style the width of `.table__color` based on the value of the data-attribute from the array
/*for (var i=0; i < barWidthData.length; i++){
    $(".table__color").css("width", barWidthData[i] + "%");
}*/
/*$(".table__color").each(function(index) {
  $(this).css("width", barWidthData[index] + "%");
});*/

$(".table__color").css("width", function(idx) {
  return barWidthData[idx] + "%";
});

.table__row {
  border-bottom: 1px solid black;
  font-family: "Open Sans";
  font-size: 16px;
}

.table__row {
  position: relative;
}

.table__row--inner {
  padding-left: 16px;
  padding-right: 16px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

.table__color {
  background: #FFCB50;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  z-index: -1;
}

.table__statement {
  font-weight: 700;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table">
  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">This company operates by strong values and ethics</p>
      <p class="table__pct" data-attribute="85.1">85.1%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My manager cares about my concerns</p>
      <p class="table__pct" data-attribute="82.4">82.4%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My manager makes it easier to do my job well</p>
      <p class="table__pct" data-attribute="81.9">81.9%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My job makes me feel like I am part of something meaningful
        <p class="table__pct" data-attribute="81.4">81.4%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I feel genuinely appreciated at this company</p>
      <p class="table__pct" data-attribute="81.4">81.4%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I have confidence in the leader of this company</p>
      <p class="table__pct" data-attribute="80.7">80.7%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <!-- Check this -->
  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I have the flexibility I need to balance my work personal life</p>
      <p class="table__pct" data-attribute="80.6">80.6%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">This company motivates me to give my very best at work</p>
      <p class="table__pct" data-attribute="80.4">80.4%</p>
    </div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I would highly recommend working at this company to others</p>>
      <p class="table__pct" data-attribute="79.8">79.8%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">New ideas are encouraged at this company</p>
      <p class="table__pct" data-attribute="78.4">78.4%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I believe this company is going in the right direction</p>
      <p class="table__pct" data-attribute="78.2">78.2%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My manager helps me learn and grow</p>
      <p class="table__pct" data-attribute="78.1">78.1%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">This company enables me to work at my full potential</p>
      <p class="table__pct" data-attribute="76.2">76.2%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">This company encourages different points of view</p>
      <p class="table__pct" data-attribute="74.1">74.1%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">This job has met or exceeded the expectations I had when started</p>
      <p class="table__pct" data-attribute="73.6">73.6%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">At this company, we do things efficiently and well</p>
      <p class="table__pct" data-attribute="70.9">70.9%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I get the formal training I want for my career</p>
      <p class="table__pct" data-attribute="69">69.0%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">There is good inter-departmental cooperation at this company</p>
      <p class="table__pct" data-attribute="68.1">68.1%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I feel well-informed about important decisions this company</p>
      <p class="table__pct" data-attribute="66.6">66.6%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">Senior managers understand what is really happening at the company</p>
      <p class="table__pct" data-attribute="66.4">66.4%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My benefits package is good compared to others in the industry</p>
      <p class="table__pct" data-attribute="64.9">64.9%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">My pay is fair for the work I do</p>
      <p class="table__pct" data-attribute="63.8">63.8%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">I have not considered searching for a better job in the past month</p>
      <p class="table__pct" data-attribute="62.6">62.6%</p>
    </div>

    <div class="table__color"></div>
  </div>

  <div class="table__row">
    <div class="table__row--inner">
      <p class="table__statement">There is not a lot of negativity at my workplace</p>
      <p class="table__pct" data-attribute="59">59.0%</p>
    </div>

    <div class="table__color"></div>
  </div>
</div>