javascript - 迭代数组以使用样式元素的数据属性，但仅获取数组中的最后一个值

标签 javascript jquery html arrays

目标

  • 我正在尝试设置一系列 div .table__color 的样式，其中宽度 div 的值等于 .table__pct 元素数组中的数据属性值。
  • 因此，如果数据属性的值为 59，则 .table__color div 的宽度为 59%，呈现水平条形图的外观。

问题

  • 现在，所有 .table__color 条的宽度都是相同的，因为我只能获取数组中的最后一项，因此所有 div 的宽度为59%

脚本.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>

样式.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;
}

最佳答案

您可以循环遍历所有 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>

关于javascript - 迭代数组以使用样式元素的数据属性，但仅获取数组中的最后一个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44617197/

上一篇：javascript - Canvas fillRect() 不工作

下一篇：javascript - Firebase 的云功能 : how to reference a key in a list that has been just pushed

相关文章：

javascript - 将 import() 转换为同步

javascript - 在初始加载页面转换快照

javascript - 修复了 Navbar 子下拉菜单无法正确显示的问题

c# - RadComboBox 不会在点击时折叠

javascript - 如何在执行操作时重新执行 jQuery

javascript - 在 mousedown 和 mousemove 事件中获取鼠标位置

javascript - 如何获取mysql.user密码的值

javascript - 当上面的选项卡打开时，将 div 元素推到容器底部

javascript - 添加到对象列表和从对象列表中获取值的最快方法

javascript - jQuery UI 日期选择器范围选择器问题

©2024 IT工具网  联系我们