0

我有一个简单的 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 和内容的正确方法吗？

如何查看数组的内容？

4

5 回答 5

3

您正在将 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);
于 2012-11-26T15:22:37.547 回答
1

将您的推送更改为

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

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

于 2012-11-26T15:23:07.620 回答
1

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

$(document).ready(function(){
  var imgArr=[];
  $('#gallery li').each(function(){
    imgArr.push(this);
    $(this).remove();
  })
  console.log(imgArr);
});​
于 2012-11-26T15:28:58.640 回答
1

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

$('#gallery li').each(function() {
    console.log(index + ': ' + $(this).html());
});
于 2012-11-26T15:29:36.743 回答
0 
$(function(){
    var imgArr=[];

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

小提琴

于 2012-11-26T15:32:35.677 回答