Gibt es eine Möglichkeit, die Breite eines Elements basierend darauf festzulegen, wie viele Geschwister es hat?

Question

Ich entwerfe ein Rasterlayout für meine Anwendung, und ich weiß nicht, wie viele Spalten es haben wird. Ich würde gerne die Breite der Spalten dynamisch einstellen. Anstatt durch [3] zu dividieren, möchte ich durch [n] dividieren, wobei [n] die Anzahl der li Elemente ist, die von meiner foreach im clientseitigen Winkelcode ausgespuckt wurden.

Ich kann keine externe Bibliothek für dieses Projekt verwenden.

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

Gibt es eine Möglichkeit, die <li> Elemente innerhalb eines <ul> dynamisch zu zählen?

Answer 1

Die gleiche Antwort wie @Rithwik aber JQuery frei

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

Vielleicht ist das Flex-Layout für Sie gemacht?

Wenn Sie Angular 2 verwenden, werfen Sie einen Blick auf die flex layout.

Andernfalls könnte dies CSS tricks complete guide Ihnen helfen.

EDIT Wie gewünscht, ein Beispielcode:

.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

Ich weiß nicht, warum meine Antwort hat Downvoted worden, also werde ich es umbuchen, so dass Sie einen Code sehen.

Flex-Layout ist eine sehr leistungsfähige Möglichkeit, Ihre Spalten alle die gleiche Breite haben; und alle verhalten sich gleich. Im Grunde ist es wie ein spaltenbasiertes Raster (wie Bootstrap), aber mit nur ein paar Zeilen CSS. Hier

ist das Codebeispiel:

.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

Um Ihre Frage zu beantworten, wie dynamisch die Anzahl der <li> in einem <ul> zählen. Sie können die Javascript .length Funktion verwenden, ein mit ein bisschen JQuery.

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

Dann können Sie Manipulationen tun, wie nach der Anzahl der <li> erforderlich, die von der Funktion zurückgegeben werden kann.

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>