根据生成的元素的可变数量创建一组 div答案

【问题标题】：Creating a set of div's based on variable number of generated elements根据生成的元素的可变数量创建一组 div
【发布时间】：2021-07-31 04:08:16
【问题描述】：

我正在尝试根据元素的迭代次数创建一组 div。

创建的元素是一个图像，根据页面的不同，服务器会生成一个可变数字，包含在父 div 中。

HTML 是：

<div id="thumbImageList">

<div class="thumbSlides">  //parent div
    
    <div class="col-3 col-md-3">  //child div that is generated
        <a href="#">
            <img src="img1.png">
        </a>
    </div>

    <div class="col-3 col-md-3">  //child div that is generated
        <a href="#">
            <img src="img2.png">
        </a>
    </div>
    
// Child Div repeated per number of images available.
</div>

</div>

Child div 需要分成不超过 4 个的组。我打算用 JS 来做这个，可能使用数组，但到目前为止还没有任何工作。

编辑：需要明确的是，模板化的代码是：


<div id="thumbImageList">

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

[%THUMBNAILS%]
    [%param *body%]

//child div that is reproduced per the number of images available.
            <div class="col-3 col-md-3"> 
                <a href="javascript:;" rel="[@full_image@]">
                    <img src="[@thumb_image@]" class="img-fluid product-image-small">
                </a>
            </div>

    [%/ param%]
[%/ THUMBNAILS%]

    </div>
</div>

模板由服务器解析，然后使用上面提供的 HTML 结构将其交给浏览器。

4 个图像的集合旨在位于父 div 的新迭代中。所以结果是：

<div id="thumbImageList">>

    <div class="thumbSlides">
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]1">
                    <img src="[@thumb_image@]1" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]2">
                    <img src="[@thumb_image@]2" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]3">
                    <img src="[@thumb_image@]3" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]4">
                    <img src="[@thumb_image@]4" class="img-fluid product-image-small">
            </a>
        </div>
  </div>
    <div class="thumbSlides">
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]5">
                    <img src="[@thumb_image@]5" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]6">
                    <img src="[@thumb_image@]6" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]7">
                    <img src="[@thumb_image@]7" class="img-fluid product-image-small">
            </a>
        </div>
        <div class="col-3 col-md-3">
                <a href="javascript:;" rel="[@full_image@]8">
                    <img src="[@thumb_image@]8" class="img-fluid product-image-small">
            </a>
        </div>
  </div>

</div>

更新：多亏了亨利·曼努埃尔的投入，我设法创建了所需的 div。使用以下内容：

    var w = document.getElementById('thumbImageList');

    var n = w.childElementCount / 4;

    for(var i=0; i<n; i++){
        $("#thumbImageList").append(
            '<div class="thumbSlides">'
        );                   
        
    };

现在，据我所知，我需要将子 div 放入新的父母中。

【问题讨论】：

不是sn-ps的代码，可以提供minimal reproducible example吗？

标签： javascript arrays sorting

【解决方案1】：

以这个基本示例为例，根据您的需要对其进行修改。

<html>
<body>
    
    <div id="idAttr">
        
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">

    var n = 5;

    for(var i=0; i<n; i++){
      $("#idAttr").append(
        '<a href=""><img src="https://images.pexels.com/photos/5549976/pexels-photo-5549976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> </a>'
      );                   
      
    };
</script>

注意var n = 5，这将代表你从服务器获取的次数

【讨论】：

谢谢，Henry 因为我试图将已经存在的 div 元素放入另一个 div 中，所以我不确定如何使提供的 sn-p 函数按预期进行。 append 将向 dom 添加一个元素，但除此之外，我需要将现有的 div 移动到新创建的 div 中。我可能在这里遗漏了一个核心概念，我对 JS 和 jQuery 很陌生。我已经编辑了这篇文章，希望能更加清晰。

【解决方案2】：

我已经使用一个简单的 jQuery 函数解决了这个问题：

    $("#thumbImageList div").slice(start, end,).wrapAll(
        '<div class="thumbSlides">'
    );

然后我只是根据图像的数量迭代这个字符串。

【讨论】：