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

Question

我试图重新调整每个.subgroup中每个.totalInput的文本并将它传递给width属性，我该怎么做？

$('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)) + '%'); 
 

 
    }); 
 
});

span {display:inline-block}

<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>

使得第1子组的输出将变成：

<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

我相信这会做你想要什么：

$('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(" "); 
 
});

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

<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>

请注意我已更改的CSS属性，使其在示例中看起来不错。阅读箱子大小和display: inline（默认值为<span>）和display: block之间的差异。如果您想要块元素，只需使用<div>即可。

另外，请注意，jQuery可以在一个回调函数中一次性修改某个属性（在本例中为css宽度）。这很方便记住，它与其他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>

所以，你需要针对每个子组的儿童，并针对上一个当前总跨度的元素，繁衍与100 ...