Javascript 想知道如何在jquery或JS中实现类似于*ngFor/ng repeat的功能吗

在jQuery或vanilla JS中是否可能有类似的

ngFor

或

ng repeat

概念

想做一些类似的事情，但不是以角度的方式

<div *ngFor="let inputSearch of searchBoxCount" class="col-sm-12">
    <textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="2" class="search-area-txt" attr.placeholder="{{placeholder}} {{inputSearch.name}}">
    </textarea>
</div>

---

可能与

data=”“

属性一起使用，以有意义的为准。

如果希望在

javascript

中使用，则必须在循环中动态创建元素*angular中的ngFor和ngRepeat是包含javascript或jquery中都无法包含的模板绑定的指令。一旦指令出现，请尝试渲染相应的模板，直到循环结束。无论如何，通过javascript我们可以做到这一点。 如果要将6个

div

附加到

主体

元素中，并使用相应的

id

，则必须执行以下操作

var array = ['first', 'second', 'third', .......so on];
for(var i=0; i<array.length; i++){
   var elem = document.createElement("div");
   elem.setAttribute('id', array[i]);
   document.body.appendchild(elem);
}

var数组=['first'、'second'、'third'、….等等]；
对于JQuery中的（var i=0；i，我会这样做：

HTML:



JavaScript:

var textAreas = $.map(searchBoxCount, function(inputSearch) {
    return $("<textarea></textarea")
      .attr({
        name: inputSearch.name,
        id: inputSearch.name
        rows: "2",
        placeholder: placeholder + " " + inputSearch.name
      })
      .addClass("search-area-txt");
});

$('.searchbox-container').append(textAreas);

var textAreas=$.map（searchBoxCount，函数（inputSearch）{
返回$（“
const anArray=[
{标题：“一”，正文：“例1”}，
{标题：“两”，正文：“示例2”}
]
函数ngForFunctionality（）{
让值=“”；
anArray.forEach（（post）=>{
value+=`
${post.title}-${post.body}
`；
});
document.body.innerHTML=值；
};
ngForFunctionality（）；
但不是以角度的方式是的，为什么要使用一些好的东西，而我们可以让它变得更糟…这是因为我不是以角度的方式做，否则我会以角度的方式做。我只想把这个概念应用到jquery/vanilla js中。你可能会想使用一个，可能是一个web组件，也可以看到哦，对了，我看到了，尽管
输入Search.name
没有显示任何内容。当我
console.log（inputSearch）
@MrNew:对不起，我的不好。我的参数顺序弄错了。请尝试我编辑的代码。有没有更简单的方法来分配属性而不是将它们写在单独的行中？Nvm找到了我的方法。
var textAreas = $.map(searchBoxCount, function(inputSearch) {
    return $("<textarea></textarea")
      .attr({
        name: inputSearch.name,
        id: inputSearch.name
        rows: "2",
        placeholder: placeholder + " " + inputSearch.name
      })
      .addClass("search-area-txt");
});

$('.searchbox-container').append(textAreas);