jQuery .html() of all matched elements

Question

.html() function on class selector ($('.class').html()) applies only to the first element that matches it. I'd like to get a value of all elements with class .class.

Samich · Accepted Answer · 2011-09-22T16:31:46.750

26

You are selection all elements with class .class but to gather all html content you need to walk trough all of them:

var fullHtml;

$('.class').each(function() {
   fullHtml += $(this).html();
});

search items by containig text inside of it:

$('.class:contains("My Something to search")').each(function() {
   // do somethign with that
});

Code: http://jsfiddle.net/CC2rL/1/

edited Sep 22 '11 at 16:31

answered Sep 22 '11 at 16:18

Samich

29,157
6
68
77

It match these elements but not their values. – Przemek Sep 22 '11 at 16:23
Your code matches Something. I just want to match right the "Something" but of all elements with class "class". – Przemek Sep 22 '11 at 16:28
2

Something like in the second sample? – Samich Sep 22 '11 at 16:31

iambriansreed · Answer 2 · 2016-05-04T20:09:23.143

13

I prefer a one liner:

var fullHtml = $( '<div/>' ).append( $('.class').clone() ).html();

edited May 04 '16 at 20:09

answered Jun 09 '13 at 05:30

iambriansreed

21,935
6
63
79

This one would have a side effect, it would try to move the elements of $(".class") to the inside the virtual `div` element, i.e., they would be removed from the actual DOM. You may need to do a `clone()` first, but that would probably too much overhead. – Walty Yeung Oct 07 '15 at 08:49

score 5 · Answer 3 · answered Sep 17 '14 at 15:57

You could map the html() of each element in a filtered jQuery selection to an array and then join the result:

           //Make selection
var html = $('.class')
          //Filter the selection, returning only those whose HTML contains string 
          .filter(function(){
              return this.innerHTML.indexOf("String to search for") > -1
          })
          //Map innerHTML to jQuery object
          .map(function(){ return this.innerHTML; })
          //Convert jQuery object to array
          .get()
          //Join strings together on an empty string
          .join("");

Documentation:

score 5 · Answer 4 · edited Jun 06 '22 at 08:01

5

$('.class').toArray().map((v) => $(v).html())

edited Jun 06 '22 at 08:01

Vega

27,856
27
95
103

answered Oct 01 '19 at 18:29

luky

2,263
3
22
40

3

Code-only answers are considered low quality, make sure to provide an explanation of what your code does and how it solves the problem. – NDBoost Oct 01 '19 at 22:19

score 1 · Answer 5 · edited Oct 25 '17 at 09:02

In case you require the whole elements (with the outer HTML as well), there is another question with relevant answers here : Get selected element's outer HTML

A simple solution was provided by @Volomike :

var myItems = $('.wrapper .items');
var itemsHtml = '';

// We need to clone first, so that we don’t modify the original item
// Thin we wrap the clone, so we can get the element’s outer HTML
myItems.each(function() {
    itemsHtml += $(this).clone().wrap('<p>').parent().html();
});

console.log( 'All items HTML', itemsHtml );

An even simpler solution by @Eric Hu. Note that not all browsers support outerHTML :

var myItems = $('.wrapper .items');
var itemsHtml = '';

// vanilla JavaScript to the rescue
myItems.each(function() {
    itemsHtml += this.outerHTML;
});

console.log( 'All items HTML', itemsHtml );

I am posting the link to the other answer and what worked for me because when searching I arrived here first.

score 1 · Answer 6 · edited May 23 '17 at 12:34

1

Samich Answer is correct. Maybe having an array of htmls is better!

var fullHtml = [];

$('.class').each(function() {
   fullHtml.push( $(this).html() );
});

edited May 23 '17 at 12:34

Community

1
1

answered Sep 22 '11 at 16:23

Mohsen

64,437
34
159
186

tomaj · Answer 7 · 2017-07-05T13:19:42.090

0

If you turn your jQuery object into an Array you can reduce over it.

const fullHtml = $('.class')
   .toArray()
   .reduce((result, el) => result.concat($(el).html()), '')

edited Jul 05 '17 at 13:19

answered Jul 05 '17 at 12:58

tomaj

1,570
1
18
32

jQuery .html() of all matched elements

7 Answers7