迭代数组以使用数据属性来设置元素样式，但只获取数组中的最后一个值

时间：2017-06-18 16:37:03

标签： javascript jquery html arrays

目的

我正试图设计一系列div .table__color的宽度 div的值等于.table__pct元素数组中数据属性的值。
所以，如果data-attribute的值是59，那么.table__color div的宽度是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 个答案:

答案 0 :(得分：4)

你可以循环遍历所有div，并为每个div添加宽度，这是一个例子：

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

但是，使用.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>