.HTML（）来自多个选择器

Question

I have the following jsfiddle , code below:

HTML:

<div id="one" style="display:none">One</div>
<div id="two" style="display:none">Two </div>
<div id="three" style="display:none">Three</div>
<div id="output"></div>

​jQuery:

$("#output").html($("#one,#two").html());

I can make it work with one selector, what I am trying to do is use multiple selectors, I seem to be going about it the wrong way. Can someone point me in the right direction?

Thanks

Answer 1

.html() will only get the content from the first element matching the selector rule:

Get the HTML contents of the first element in the set of matched elements.

Source: http://api.jquery.com/html/

---

If you want content from two elements you should do:

$("#output").html($("#one").html() + $("#two").html());

See Demo: http://jsfiddle.net/sshg7/2/

Answer 2

You can use .text() if you only want to get text from those divs:

$("#output").html($("#one, #two, #three").text())

Demo

Answer 3

or:

$("#output").html(function() {
  var html = [];
  $("#one,#two").each(function() {
     html.push(this.innerHTML);
  });
  return html.join("");
});

Answer 4

If there are lots of elements:

$("#output").html(
  $(selector_for_many_elements).map(function () {
    return $(this).html();
  }).get().join(', ');
);