Question

所以下面我的HTML代码是我的draggable / droppable的一部分：

   Drag from here:
        <ul id="sortable1" class="dropBox connectedSortable">
            <li class="ui-state-default">Word 1</li>
            <li class="ui-state-default">Word 2</li>
            <li class="ui-state-default">Word 3</li>
            <li class="ui-state-default">Word 4</li>
        </ul>

    Drop a word onto each iamge: <br>
        <ul class = "row">
            <li id="drop1" class="dropZones images"><img src="image1.jpg"></li>
            <li id="drop2" class="dropZones images"><img src="image2.jpg"></li>          
        </ul>
        <ul class = "row">
            <li id="drop_zone3" class="dropZones images"><img src="image3.jpg"></li>
            <li id="drop_zone4" class="dropZones images"><img src="image4.jpg"></li>
        </ul>
    </div>

我正在尝试使用document.createElement（）等创建它。但是我很难有效地执行此操作。

行的目的（在上面的代码中）用于格式化（使用bootstrap4），因为我的数组总共有6个图片，而我想要2行3。下面，我有一个数组，可以保存所有图像的src。该数组传递给函数。我能够创建一行/ ul，里面有所有的li / images。但是我希望能够创建我上面的内容，尽可能少地编写硬编码。

我有：

function createType3(arr)
{
  var count = 0;
  var length = arr.length;
  var list = document.createElement("ul");
  list.classList.add("row");

  for (var i = 0; i < length; i++)
  {
    //create list and associated ids and classes
    var listPiece=document.createElement("li");
    listPiece.classList.add("dropZones","images","list-inline");
    listPiece.setAttribute("id","dropZone");
    //create image tags and append
    var imageSRC = document.createElement("IMG");
    imageSRC.setAttribute("src",arr[i]);

    listPiece.appendChild(imageSRC);
    list.appendChild(listPiece);
}

return list;
}

我在做这件事时遇到了麻烦，谢谢。

Answer 1

您可以创建文档片段并向其添加列表元素。只要i % 3为零，就创建一个新列表。将该3作为参数，以便您也可以将该函数用于任何其他数量的条目的列表：

function createType(arr, groupSize = 3) {
    var lists = document.createDocumentFragment(),
        list;

    for (var i = 0; i < arr.length; i++) {
        if (i % groupSize === 0) {
            list = document.createElement("ul");
            list.classList.add("row");
            lists.appendChild(list);
        }
        //create list and associated ids and classes
        var listPiece = document.createElement("li");
        listPiece.classList.add("dropZones","images","list-inline");
        listPiece.setAttribute("id","dropZone");
        //create image tags and append
        var imageSRC = document.createElement("IMG");
        imageSRC.setAttribute("src", arr[i]);

        listPiece.appendChild(imageSRC);
        list.appendChild(listPiece);
    }
    return lists;
}

您可以这样称呼它：

var frag = createType(["img1.png","img2.png","img3.png","img4.png"], 3);
document.body.appendChild(frag); // add it somewhere in your HTML page

如何在单独的行中创建列表/图像的元素？

1 个答案: