28

.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.

7 Answers 7

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/

3
  • It match these elements but not their values.
    – Przemek
    Sep 22, 2011 at 16:23
  • Your code matches <a class="class">Something</a>. I just want to match right the "Something" but of all elements with class "class".
    – Przemek
    Sep 22, 2011 at 16:28
  • 2
    Something like in the second sample?
    – Samich
    Sep 22, 2011 at 16:31
13

I prefer a one liner:

var fullHtml = $( '<div/>' ).append( $('.class').clone() ).html();
1
  • 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. Oct 7, 2015 at 8:49
5

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:

5
$('.class').toArray().map((v) => $(v).html())
1
  • 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 1, 2019 at 22:19
1

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

var fullHtml = [];

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

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.

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()), '')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.