Question

JQuery的新手，所以请放轻松:)。我想在每次完成for语句时添加一个新的列表项。在这种情况下，for语句运行三次，因此列表项应该克隆三次。有人可以帮忙吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" >

var myStringArray = ["ID1", "ID2", "ID3"]
$(function () {

    var children = $("#imageList").children().clone();

    for (string in myStringArray)
    {
        $("#imageList").prepend(children);

        alert(string[0])
        console.log(string[0])
    }     
});

</script>


<ul id="imageList">
<!-- List of scrolling images -->
    <li id="image1" class="ImagesScroller" >

    </li>  
</ul>

理想的输出如下：

* ID1
* ID2
* ID3

Answer 1

您需要在每次迭代中创建一个新克隆，否则您只需一次又一次地移动相同的副本。

＆＃13;

var myStringArray = ["ID1", "ID2", "ID3"]
$(function() {

  $.each(myStringArray, function(i, string) {
    var children = $("#imageList").children().first().clone();
    children.text(string).removeAttr('id');//since id of an elemnet must be unique
    $("#imageList").prepend(children);
    console.log(string[0])
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imageList">
  <!-- List of scrolling images -->
  <li id="image1" class="ImagesScroller">

  </li>
</ul>

＆＃13;

您可以使用脚本创建元素，而不是像

那样克隆

＆＃13;

var myStringArray = ["ID1", "ID2", "ID3"]
$(function() {

  $.each(myStringArray, function(i, string) {
    $('<li />', {
      text: string,
      'class': 'ImagesScroller'
    }).appendTo('#imageList')
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="imageList">
</ul>

＆＃13;

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" >

var myStringArray = ["ID1", "ID2", "ID3"]
$(function () {
    $.each(myStringArray, function(index, item){
    $("#imageList").append('<li id="image'+index+'" class="imageScroller">'+item'+</li>');
})

});

<ul id="imageList">
<!-- List of scrolling images -->
</ul>

使用Jquery克隆列表项

2 个答案: