jQuery .html() of all matched elements

jquery each
jquery find
jquery append
jquery find text
jquery contents
jquery find all elements with class
jquery closest
jquery selector

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

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/

.each(), A function to execute for each matched element. The .each() method is designed to make DOM looping constructs concise and less <!doctype html>. The html () method sets or returns the content (innerHTML) of the selected elements. When this method is used to return content, it returns the content of the FIRST matched element. When this method is used to set content, it overwrites the content of ALL matched elements. Tip: To set or return only the text content of the selected elements, use the text () method.

I prefer a one liner:

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

.html(), Description: Get the HTML contents of the first element in the set of matched elements. version added: 1.0.html(). This method does not accept any arguments. To get the text contents of all matched elements using jQuery, use the text() method. You can try to run the following code to get text contents of all matched elements using jQuery − Example. Live Demo

.contents(), Description: Get the children of each element in the set of matched elements, nodes and comment nodes as well as HTML elements in the resulting jQuery object. Find all the text nodes inside a paragraph and wrap them with a bold tag. jQuery html() method is used to set or return the content of the selected elements. When html() method is used to set the content of the selected elements, it overwrites the content of all the matched selected elements. For example, the code $("p").html("BeginnersBook"); will change the content of all the paragraphs to “BeginnersBook”.

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

.find(), Given a jQuery object that represents a set of DOM elements, the .find() The elements will be filtered by testing whether they match this selector; all parts of the selector must lie inside of an element on which .find() is called. <!doctype html>. The html() method can be used to provide the content of any element in an HTML document. If the match expression meets more than one element, its HTML content is returned only to the first match. This jQuery html method takes advantage of the innerHTML property of the browser.

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

var fullHtml = [];

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

.filter(), Given a jQuery object that represents a set of DOM elements, the .filter() method The supplied selector is tested against each element; all elements matching the selector will be Suppose we have a somewhat more involved HTML snippet:  jQuery Selectors. jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

.map(), Description: Pass each element in the current matched set through a function, producing a new jQuery If you wish to process a plain array or object, use the jQuery.map() instead. Build a list of all the values within a form. <!doctype html>. A function returning the HTML content to set. Receives the index position of the element in the set and the old HTML value as arguments. jQuery empties the element before calling the function; use the oldhtml argument to reference the previous content. Within the function, this refers to the current element in the set.

.nextAll(), Description: Get all following siblings of each element in the set of matched elements, nextAll() method allows us to search through the successors of these​  A function to execute for each matched element. The.each () method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0.

.wrapAll(), Using .wrapAll() , we can insert an HTML structure around the inner <div> elements like so: The result is a new <div> wrapped around all matched elements:  jQuery text() Method: This method set/return the text content of specified elements. If this method is used to return content, it returns the text content of all matched elements (HTML tags will be removed).

Comments
  • It match these elements but not their values.
  • Your code matches <a class="class">Something</a>. I just want to match right the "Something" but of all elements with class "class".
  • Something like in the second sample?
  • 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.
  • Code-only answers are considered low quality, make sure to provide an explanation of what your code does and how it solves the problem.