Question

我有一个简单的ul列表

  <ul id="gallery">
    <li><a href=""><img src="images/01.jpg" /></a></li>
    <li><a href=""><img src="images/02.jpg" /></a></li>
    <li><a href=""><img src="images/03.jpg" /></a></li>
    <li><a href=""><img src="images/04.jpg" /></a></li>
  </ul>

我想将li（及其内容）添加到数组中，然后删除li，然后使用console.log查看数组我正在使用它。

  $(function(){

    var imgArr=[];

    $('#gallery li').each(function(){
      imgArr.push($(this));
      $(this).remove();
    })

    console.log(imgArr);

  })

我以为console.log会显示一个包含

的li列表

    <a href=""><img src="images/01.jpg" /></a>

相反，我得到了一个Object [1]

的列表

这是添加li和内容的正确方法吗？

如何查看数组的内容？

Answer 1

您正在将jQuery对象推入数组中。使用imgArr.push(this)而不是imgArr.push($(this))代替推送DOM节点。

演示：http://jsfiddle.net/5rAeH/

在演示中，我删除了您的.each，而是使用了

var imgArr = $.makeArray($('#gallery li'));
console.log(imgArr);

$("#gallery li").remove();
console.log(imgArr);

Answer 2

将您的推送更改为

imgArr.push($(this).html());

现在你将把html推送到数组而不是Jquery对象。

Answer 3

您的代码需要修改，您只需在数组中添加“this”。

$(document).ready(function(){
  var imgArr=[];
  $('#gallery li').each(function(){
    imgArr.push(this);
    $(this).remove();
  })
  console.log(imgArr);
});

Answer 4

要将数组的内容打印为 html （而不是javascript对象），请执行

$('#gallery li').each(function() {
    console.log(index + ': ' + $(this).html());
});

Answer 5

$(function(){
    var imgArr=[];

    $('#gallery li').each(function(i,elm){
        imgArr[i] = elm.outerHTML;
        $(elm).remove();
    });
    console.log(imgArr);
});

FIDDLE

将li添加到数组并使用console.log进行查看

5 个答案: