要素の幅は、兄弟の数に基づいて設定できますか？

Question

私は自分のアプリケーション用のグリッドレイアウトを設計していますが、その列の数はわかりません。列の幅を動的に設定したいと思います。 [3]で割るのではなく、[n]で除算したいと思います。ここで[n]はクライアントサイドの角度コードでforeachで吐き出されるli要素の数です。

このプロジェクトでは外部ライブラリを使用できません。

li { 
        display:block; 
        float: left; 
        width: calc(~'(100% - 30px)/3'); 
        padding-left: 25px;      
        text-align: center; 
} 

動的<ul>内部<li>要素をカウントする方法はありますか？

Answer 1

@Rithwikが、jQueryの自由と同じ答え

function update() { 
 
    return document.querySelectorAll("#counter li").length; 
 
} 
 

 
document.querySelector(".add").onclick = function() { 
 
    document.querySelector("#counter").innerHTML += "<li>Random</li>"; 
 
}; 
 
document.querySelector(".count").onclick = function() { 
 
    document.querySelector(".output").innerHTML = update(); 
 
};

<button class="add">Add item</button> 
 
<button class="count">Get count</button> 
 

 
<br><br> 
 
<div>Number of li tags : <span class="output"> - </span></div> 
 

 
<ul id="counter"> 
 
    <li>A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
    <li>D</li> 
 
</ul>

Answer 2

おそらくフレックスレイアウトはあなたのために作られていますか？

角度2を使用する場合は、flex layoutをご覧ください。

この場合、CSS tricks complete guideがお手伝いします。私の答えはdownvotedされた理由を私は知らないので、あなたはいくつかのコードを見ることができるように、私はそれを再投稿します

.parent-container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; // wrap will fit in the parent. nowrap will extend the parent. 
    justify-content: space-around; 
    align-items: center; 
    align-content: center; 
} 

.children { 
    flex: 1 1 auto; // All the same width, always 
} 

Answer 3

：要求された、サンプルコードとして

EDIT。

フレックスレイアウトは、列の幅をすべて同じにするための非常に強力な方法です。すべて同じように動作します。基本的には、列ベースのグリッド（ブートストラップなど）に似ていますが、CSSの数行だけです。ここで

は、コードサンプルです：

.parent-container { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; // wrap will fit in the parent. nowrap will extend the parent. 
    justify-content: space-around; 
    align-items: center; 
    align-content: center; 
} 

.children { 
    flex: 1 1 auto; // All the same width, always 
} 

Answer 4

動的<ul>内<li>の数をカウントする方法についてのご質問に答えるために。 JavaScriptの.length関数を使用して、少しのJQueryを使用することができます。関数によって返される可能性が<li>の数、あたりとして必要に応じて

$("ul li").length; 
// OR Better 
$("#id_of_ul li").length; 

次に、あなたが操作を行うことができます。

function update() { 
 
    return $("#counter li").length; 
 
} 
 

 

 
$(".add").on("click", function() { 
 
    $("#counter").append("<li>Random</li>"); 
 
}); 
 
$(".count").on("click", function() { 
 
    new_count = update(); 
 
    $(".output").html(new_count); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button class="add">Add item</button> 
 
<button class="count">Get count</button> 
 

 
<br><br> 
 
<div>Number of li tags : <span class="output"> - </span></div> 
 

 
<ul id="counter"> 
 
    <li>A</li> 
 
    <li>B</li> 
 
    <li>C</li> 
 
    <li>D</li> 
 
</ul>