javascript 函数不执行，仅在控制台中有效

Question

我正在尝试使用 jquery 操作 css 值。我想将 width 添加到 .block，使用它的子元素的 value。

函数在页面加载时不起作用，但如果我在 console (chrome-dev) 上运行它；有用。

这是我的代码:

$(document).ready(function() {
  $('.gauge').each(function() {
    var text = $(this).text();
    $(this).parent().css('width', text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="wrap"><span class="gauge ">70%</span></span>
    <span class="wrap"><span class=" gauge ">20%</span></span>
    <span class="wrap"><span class=" gauge ">10%</span></span>
  </li>
</ul>

Answer 1

如果将 parents 设置为 display: block 似乎效果很好:

$(document).ready(function () {
  $('.gauge').each(function () {
    var text = $(this).text();
    $(this).parent().css('width', text);
  }); 
});

ul {
  padding: 0px;
  margin: 0px;
  display: block;
}

ul li {
  list-style: none;
  display: block;
}

.wrap {
  display: block;
  width: 100%;
  height: 30px;
  background-color: #FEFEFE;
  margin-bottom: 10px;
}
.wrap .gauge {
  display: block;
  color: white;
  padding: 5px;
  font-size: 12px;
  line-height: 20px;
}
.wrap:nth-child(1) .gauge {
  background-color: red;
}
.wrap:nth-child(2) .gauge {
  background-color: blue;
}
.wrap:nth-child(3) .gauge {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <span class="wrap"><span class="gauge ">70%</span></span>
    <span class="wrap"><span class=" gauge ">20%</span></span>
    <span class="wrap"><span class=" gauge ">10%</span></span>
  </li>
</ul>