所有匹配元素的jQuery .html()

时间:2011-09-22 16:17:04

标签: javascript jquery

类选择器(.html())上的

$('.class').html()函数仅适用于与其匹配的第一个元素。我想得到类.class的所有元素的值。

7 个答案:

答案 0 :(得分:24)

您选择了所有带有.class类的元素,但要收集所有需要的所有html内容:

var fullHtml;

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

通过其中的包含文本搜索项目:

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

代码:http://jsfiddle.net/CC2rL/1/

答案 1 :(得分:11)

我更喜欢一个班轮:

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

答案 2 :(得分:4)

您可以将过滤后的jQuery选择中每个元素的html()映射到数组,然后加入结果:

           //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("");

文档:

答案 3 :(得分:1)

Samich答案是正确的。也许有一组html s更好!

var fullHtml = [];

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

答案 4 :(得分:1)

如果您需要整个元素(也包含外部HTML),还有另一个问题,其中包含相关答案:Get selected element's outer HTML

simple solution提供@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 );

simpler solution@Eric Hu偶数outerHTML。请注意,并非所有浏览器都支持{{3}}:

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

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

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

我发布了其他答案的链接以及对我有用的内容,因为我在搜索时首先来到这里。

答案 5 :(得分:0)

如果您将jQuery对象转换为Array,则可以reduce覆盖它。

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

答案 6 :(得分:0)

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