在for循环中只创建一次元素，并使用jquery从数组中为其赋值

I have an array majorArray, suppose it contains 20, 25, 30, 35. When I put it inside a loop and create elements dynamically as coded below, this element is created multiple times as the length of an array. However, I only want to create only one for each value and assign id by value of a specific position of an array to the li tag.

我有一个数组majorArray,假设它包含20,25,30,35。当我把它放在一个循环中并按照下面的编码动态创建元素时,这个元素被创建多次作为数组的长度。但是,我只想为每个值创建一个,并将数组的特定位置的值分配给li标签。

Please help to solve my problem?

请帮忙解决我的问题?

for(i = 0; i <= majorArray.length; i++) {
    var ul_client_listing = ('.clientlisting').addClass('client_ul').append('<ul>');
    var li_client_listing = $('.client_ul ul').addClass('client_li').append('<li id="first'+majorArray[i]+'" class="mainli"> <div class="cientname"> </div></li>');
    $('.cientname').append('<input type="text" placeholder="comment..." class="reviewtext1" style="margin-top:10px"/>');
}

1 个解决方案

#1

The problem with the way you're creating and adding new elements is you use selectors which not only selects the newly created elements, but all such elements.

您创建和添加新元素的方式的问题是您使用选择器,它不仅选择新创建的元素,而且选择所有这些元素。

For example inside your loop you have:

例如,在你的循环内你有:

var ul_client_listing = ('.clientlisting').addClass('client_ul').append('<ul>');

And then right after that you append a li to $('.client_ul ul') which is not only the newly created ul, but all the ul with an ancestor with class .client_ul. And the same about li elements.

然后在你之后你将一个li附加到$('。client_ul ul'),它不仅是新创建的ul,而且是一个带有类.client_ul的祖先的ul。和李元素一样。

You can do it like this:

你可以这样做:

var container = $('.clientlisting').addClass('client_ul');
for (i = 0; i <= majorArray.length; i++) {
    var ul = $('<ul/>');
    var li = $('<li/>').prop('id', 'first' + majorArray[i]).addClass('mainli');
    var div = $('<div/>').addClass('cientname');
    var inp = $('<input/>').attr({
                type: 'text',
                placeholder: 'comment...',
                class: 'reviewtext1'
            }).css('margin-top', '10px');
    div.append(inp);
    li.append(div);
    ul.append(li);
    container.append(ul);
}

#1