Question

我尝试重新调整每个.totalInput中每个.subgroup的文本并将其传递到width属性，我该怎么办？

＆＃13;

$('div.subgroup').each(function(index, element) {
  var maxLength = Math.max.apply(Math, $(".totalInput", this).map(function() {
    return $(this).text();
  }).get());
  $('.totalInput').each(function(index, element) {
    var tot = element;
    $(element).siblings(".facet-percentage").width(parseInt(($(element).text() / maxLength)) + '%');

  });
});

＆＃13;

span {display:inline-block}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='group'>
  <div class='subgroup'>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>10</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>20</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>30</span>

  </div>
  <div class='subgroup'>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>50</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>100</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>70</span>

  </div>

</div>

＆＃13;

这样第一个子组的输出将变为：

<div class='subgroup'>
    <span class='facet-percentage' width='33%'></span>
    <span class='totalInput'>10</span>
    <span class='facet-percentage' width='66%'></span>
    <span class='totalInput'>20</span>
    <span class='facet-percentage' width='100%'></span>
    <span class='totalInput'>30</span>

  </div>

Answer 1

我相信这会做你想要的：

＆＃13;

$('div.subgroup').each(function () {
  var maxLength = Math.max.apply(Math, $(this).find(".totalInput").map(function() {
    return +$(this).text();
  }).get());

  $(this).find('.facet-percentage').css('width', function () {
    return (100 * +$(this).next().text() / maxLength) + '%';
  }).html("&nbsp;");
});

＆＃13;

.subgroup {
  border: 1px solid blue;
  box-sizing: border-box;
  margin: 5px;
}
.subgroup > span {
  display: block;
  box-sizing: border-box;
}
.facet-percentage {
  border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='group'>
  <div class='subgroup'>
    <span class='facet-percentage'></span>
    <span class='totalInput'>10</span>
    <span class='facet-percentage'></span>
    <span class='totalInput'>20</span>
    <span class='facet-percentage'></span>
    <span class='totalInput'>30</span>
  </div>
  <div class='subgroup'>
    <span class='facet-percentage'></span>
    <span class='totalInput'>50</span>
    <span class='facet-percentage'></span>
    <span class='totalInput'>100</span>
    <span class='facet-percentage'></span>
    <span class='totalInput'>70</span>
  </div>
</div>

＆＃13;

请注意我已更改的CSS属性，使其在示例中看起来不错。阅读box-sizing以及display: inline（<span>的默认值）和display: block之间的差异。如果你想要块元素，只需使用<div>。

另外，请注意，jQuery可以使用回调函数一次性修改某个属性（在本例中为css width）。这很方便记住，它与其他jQuery DOM操作函数的工作方式相同。

Answer 2

如果我理解正确，你需要这个：

$('div.subgroup').each(function(index, element) {
  var maxLength = Math.max.apply(Math, $(".totalInput", this).map(function() {
    return $(this).text();
  }).get());
  
  $(this).children('.totalInput').each(function(index, element) {
    var tot = element;
//console.log(parseInt($(tot).text() / maxLength*100));

$(element).prev(".facet-percentage").css('width',parseInt($(tot).text()/maxLength*100)+'%');

  });  
 

});

span.facet-percentage {display:block; background:red;margin-bottom:10px;height:10px;}
.subgroup {
  width:600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='group'>
  <div class='subgroup'>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>10</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>20</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>30</span>

  </div>
  <div class='subgroup'>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>50</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>100</span>
    <span class='facet-percentage' width=''></span>
    <span class='totalInput'>70</span>

  </div>

</div>

因此，您需要针对每个子组的子项目，并定位当前总跨度的prev元素，并乘以100 ......

如何在每个元素子集中缩放值？

2 个答案: