访问div中的元素并使用jQuery附加到列表

时间:2014-09-18 00:25:53

标签: javascript jquery html

我正在尝试使用jQuery将我的HTML的一部分存储在数组中。

我的HTML中有这个:

<div id="slide">
     <div class="image">
         IMAGE 1
     </div>
     <div class="image" >
         IMAGE 2
     </div>
     <div class="image">
        IMAGE 3
     </div>
</div>

如果我在for循环中执行此操作:

$(".image").html();

我明白了:

[IMAGE 1, IMAGE 2, IMAGE 3]

如果我这样做:

$("#slide").html();

我明白了:

[<div class="image">IMAGE 1</div><div class="image">IMAGE 2</div><div class="image">IMAGE 3</div>,
<div class="image">IMAGE 1</div> <div class="image">IMAGE 2</div> <div class="image">IMAGE 3</div>,
<div class="image">IMAGE 1</div><div class="image">IMAGE 2</div><div class="image">IMAGE 3</div>]

我希望我的数组看起来像:

[<div class="image">IMAGE 1</div>,
<div class="image">IMAGE 2</div>, 
<div class="image">IMAGE 3</div>] 

这意味着我希望整个div成为一个元素。

3 个答案:

答案 0 :(得分:0)

您可以尝试这样做:

var nodes = $('.image').map(function() {
  return $(this)[0];
});

// Or if you just want a normal array and not a jQuery collection
var nodes = [];

$('.image').each(function() {
    nodes.push($(this)[0]);
});

希望这有帮助!

编辑:Working JSFiddle

答案 1 :(得分:0)

如果你想要html(包括父标签),一种可能的方法是克隆元素,将它附加到一个新的空div,然后获取该div的html:

var htmlArray = [];
$(".image").each(function(index, el) {
    htmlArray.push($("<div/>").append($(el).clone()).html());
});

在这里小提琴:http://jsfiddle.net/wjgndc30/

此外,您还在使用大括号{}在javascript中引用数组。大括号引用javascript对象。数组用括号[]表示。

答案 2 :(得分:0)

jQuery有一个内置的toArray函数支持这个:

$(".image").toArray();