jQuery从div内部获取divs html

Question

I have the following html:

<div id="parent">
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
</div>

I'm trying to get all the divs html from within the div with id="parent" . After that build an array and push each html to it.

Basically I need to get this:

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

rather then this:

1
2
3
4

And the jQuery code:

var val = [];

$.each($('#parent'), function (i, left) {
    $('div', left).each(function () {

        var data = $(this).html();
        val.push(data);

    });
});

alert(JSON.stringify(val));

Here is JSFiddle

Answer 1

You could use the .map() method , which will return an array of the children div elements.

Updated Example

var divs = $('#parent div').map(function () {
    return this;
}).get();

---

You don't need to use jQuery for this, though. Here is a plain JS option which returns the same results:

Updated Example

var divs = Array.prototype.map.call(document.querySelectorAll('#parent div'), function (el) {
    return el;
});

Answer 2

count=$('#parent > div').length;
for(i=0;i<count;i++){

console.log($('#parent > div')[i].outerHTML);
}

https://jsfiddle.net/uabL649m/2/

Answer 3

try outerHTML , like below. Demo@ fiddle

var arr = [];
$("#parent > div").each(function() {
    arr.push(this.outerHTML);
});
console.log ( JSON.stringify(arr ) );