如何使用jQuery从给定HTML元素下的给定类的所有元素中提取文本

Question

When I do this:

var elem = $(".region_box");
text = elem.find(".my_text").html();

I can get text from the first element deep below "elem" with class "my_text" which it finds.

But there are many elements of the class "actual_text" below elem and I want to combine the text from all of them. How would I do it? I am new to jQuery and I searched around for solution for long time, but neither of them worked for me. Perhaps I am using this each() function incorrectly. I would very much appreciate any help.

Answer 1

You can use the jQuery.each

var text = '';

var elms = $(".region_box .my_text").each(function () {
    text = text + $(this).text(); // use .html() if you actually want the html
});

Answer 2

Define a variable to hold the new string, select all of the elements you wish to extract, chain that with .each() and add the contents of the text node for that element to the variable you created to hold the new string.

( Demo )

var text = "";
$(".region_box .my_text").each(function(){ text += " " + $(this).text(); });

Answer 3

try something using jquery .map() method like this,

text = $('.region_box').find('.my_text').map(function() {
  return $(this).text();
}).get().join(',');

As the site said, "As the return value is a jQuery object, which contains an array, it's very common to call .get() on the result to work with a basic array."