Wie skaliert man einen Wert innerhalb jeder Teilmenge von Elementen?

Question

Ich versuche, den Text jedes .totalInput innerhalb jedes .subgroup zu reskalieren und es in das width Attribut zu übergehen, wie kann ich es tun?

$('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>

Derart, dass die Ausgabe der ersten Untergruppe würde:

<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

ich das glauben, was Sie wollen:

$('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>

Beachten Sie die CSS-Eigenschaften, die ich geändert habe, damit sie im Beispiel gut aussehen. Lesen Sie mehr über Box-Sizing und den Unterschied zwischen display: inline (der Standard für <span>) und display: block. Verwenden Sie einfach <div>, wenn Sie Blockelemente trotzdem möchten.

Beachten Sie auch, dass jQuery eine bestimmte Eigenschaft (in diesem Fall css width) auf einmal mit einer Callback-Funktion ändern kann. Dies ist praktisch, um es im Auge zu behalten, es funktioniert auf die gleiche Weise mit anderen jQuery DOM-Manipulationsfunktionen.

Answer 2

Wenn ich Dich richtig verstehe, müssen Sie dies:

$('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>

Also, Sie müssen für Kinder jeder Untergruppe zielen, und i.Vj. Elements der aktuellen Gesamtspanne Ziel, und multiplizieren mit 100 ...