js中如何让每10个div换一行

Posted 2023-04-28

js中如何让每10个div自动换一行

每10个换行太多了，就以每2个换行为例吧！

首先10个div标签。

<div class="box">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
    <div>div6</div>
    <div>div7</div>
    <div>div8</div>
    <div>div9</div>
    <div>div10</div>
    <div>div11</div>
    <div>div11</div>
</div>

然后就是js代码

$(".box div").each(function(index, element) 
    var idx=index+1;
    if (!(idx%2))
        $(this).after('<br/>');
    
);

主要的就是“idx%2”这里，进行判断就可以了。

参考技术A <div id="test">
    
    <div>1</div>
    <div>2</div>
    <div>3</div>

    <div>1</div>
    <div>2</div>
    <div>3</div>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    
</div>

<style>
div div
    width: 30px;
    background: green;

</style>

<script>
function divBr() 
    var div = document.getElementById("test").getElementsByTagName("div");

    for(var i=0;i<div.length;i++)
        if(i%3-2==0)
                div[i].style.color = "red";
                div[i].style.marginBottom = 20 + "px";
        
    


divBr();
</script>

我写的3行一个空行，你改成10行就行了，我也是新手，不知道怎么能插入个<br />标签在第三个div后面，我只知道改变第三行样式，加大了外边距，视觉上看起来和加换行是一样的。

参考技术B window.onload = function() 
            var aDiv = document.getElementsByTagName('div');
            var str = "";
            for (var i = 1; i <= 100; i++) 
                if(i%10==0 && i!=0)
                     str += "<div>" + i + "</div>"+"<br>";
                else
                str += "<div>" + i + "</div>";
            
            document.body.innerhtml = str;
        

参考技术C 直接循环 每10个 div 加一个 <br> 换行！或者你就贴出一点代码看看 ，怎么写的追问

if里面执行的代码语句块怎么写。

参考技术D var len = obj.length;
var tableHead = "表头";
if (len > 0)
var html = [];
$.each(obj, function (i, d)
if (i == 0)
html.push(tableHead);

html.push("<tr >" +
(i + 1) + "</td><td>" +
obj[i].ProjectCode + "</td><td>" +
obj[i].ProjectName + "</td><td >" +
obj[i].BeginDate + "</td><td >" +
obj[i].ComplDate + "</td><td >" +
obj[i].UserName + "</td></tr>");
if ((i + 1) % 5 == 0 && (i < (len - 1)))
html.push('</div><div class="A4">');
if (i == len - 1)
html.push('')

);
这里是每五行数据包一个div
console.log(html.join('')) 可查看拼接后的html

前端面试

JavaScript

 js如何实现继承

 

 

CSS

行内元素和块状元素的区别

 

CSS让2个DIV在同一行显示的解决方法

　　在CSS中，div属于块级元素，每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。所以默认情况下，2个div是无法显示在同一行的，必须通过样式属性去修改。

　　解决方方法1：display:inline，将其变成行级元素，这样2个div就会排在同一行。

　　解决方法2：使用float

　　使用inline，2个div之间默认是有缝隙的，不会刚好贴在一起；使用float，会影响后续的div，必须通过clear清除。