Jquery : 자식 div 수에 따라 부모 및 자식 클래스가 같은 하위 div가 다른 너비

Question

jquery의 Noob. div를 격리하는 데 어려움을 겪고 있습니다.

하위 div 수가 다른 몇 개의 상위 div가 있습니다. 각 상위 div의 하위 div 수를 기준으로 하위 div 수를 설정하려고합니다. 내 스크립트는 각 부모를 따로 계산하지 않고 모두 계산합니다. 그것을 위해

HTML은 반복에서 현재 항목을 얻을 수

<div class="parent"> 
<div class="child"></div> 
<div class="child"></div> 
</div> 
<div class="parent"> 
<div class="child"></div> 
<div class="child"></div> 
<div class="child"></div> 
</div> 

및 JQuery와

$(".parent").each(function(){ 
    var prodchildren = $(".parent").children().length; 
    if (prodchildren > 1) { $(".child").css('width','49%'); } 
    if (prodchildren > 2) { $(".child").css('width','33%'); } 
    if (prodchildren > 3) { $(".child").css('width','24.5%'); } 
    if (prodchildren > 4) { $(".child").css('width','19.5%'); } 
}); 

Answer 1

먼저 HTML과 JS가 일치하지 않습니다. 하지만 jQuery에서 할 수있는 방법은 매우 간단합니다. 다음 HTML의 경우 :

$(".parent").each(function(){ 
    // instead of using if, why don't you just calculate it? 
    // first, check the width of a child by dividing 100 by the amount of children 
    var child_width = 100/$(this).children().length; 
    // then, round it to the below number so you get a nice round number and the total doesnt exceed 100 
     child_width = Math.floor(child_width); 
    // the $(this) selector represents the current .parent 
    $(this).children().css("width", child_width + "%"); 
}) 

Answer 2

사용 $(this) 될 것이다.

$(".basecollections").each(function(){ 
    var prodchildren = $(this).children().length; 
    if (prodchildren > 1) { $(".product777").css('width','49%'); } 
    if (prodchildren > 2) { $(".product777").css('width','33%'); } 
    if (prodchildren > 3) { $(".product777").css('width','24.5%'); } 
    if (prodchildren > 4) { $(".product777").css('width','19.5%'); } 
}); 

Answer 3

것 같아요, 단지 아이들의 수에 의해 나누어해야 100 %의 폭 :

<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 
<div class="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

는이 스크립트를 사용할 수 있습니다. 십진수로 퍼센트로 작업하는 것이 가능하기 때문에 0.5 % 여백을 포함하여이 모든 것을 계산할 것입니다. (이것은 whaaaaz가 원하는 것입니다). CSS에서

그래서 스타일 :

.parent > .child {margin-left:0.5%} 
.parent > .child:last-child {margin-right:0.5%} 

및 계산 jQuery로 :

가

$(".parent").each(function(){ 
    var children = $(this).children().length; 
    var child_width = ((100-0.5-(0.5*children))/children).toFixed(3); 
    $(this).children().css("width", child_width + "%"); 
})