如何在每個元素子集內縮放一個值？

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