使用find()处理Ajax响应输出HTMLSpanElement及元素内容获取问题

哥们，我刚看完你的问题，这问题我之前也碰过——出现[object HTMLSpanElement]是因为你直接把DOM元素对象当成字符串来处理了，jQuery里操作DOM得讲究方法，我给你一步步拆解解决：

当你用find()方法时，它返回的是jQuery包装后的DOM元素对象，而不是字符串。如果直接把这个对象拼接到字符串里（比如$('.container').html('内容：' + $('.hour'))），JavaScript会自动把DOM对象转成它的字符串表示，也就是[object HTMLSpanElement]。正确的做法是先获取元素的文本/HTML内容，或者直接操作DOM元素进行插入。

假设你的Ajax响应返回的是包含目标元素的HTML内容，我们可以这样处理：

1. 获取所有class为hour的span元素内的文本 #

首先把Ajax返回的HTML转换成jQuery对象，这样就能方便地用find()定位元素，然后遍历或收集文本：

• 如果要逐个处理每个hour的文本：

// 假设data是Ajax返回的HTML内容
var $response = $(data);
$response.find('.hour').each(function() {
  var hourText = $(this).text().trim(); // 去除前后空格
  // 这里可以对每个hourText做处理，比如打印、存到数组里
  console.log('小时文本：', hourText);
});

• 如果要把所有文本收集成数组：

var hourTexts = $response.find('.hour').map(function() {
  return $(this).text().trim();
}).get();
console.log('所有小时文本数组：', hourTexts); // 输出类似 ["8:00", "9:00", "10:00"]

2. 获取第二个class为temp的div元素的data-code属性值 #

jQuery的索引是从0开始的，所以第二个元素对应的索引是1，用:eq(1)选择器定位，再用data()方法获取属性值（data()会自动转换属性值的类型，比attr()更友好）：

var secondTempDataCode = $response.find('.temp:eq(1)').data('code');
console.log('第二个temp的data-code值：', secondTempDataCode);

避免再出现[object HTMLSpanElement]，你可以选择两种方式：

• 直接插入DOM元素：如果要把hour元素原样插入，直接用append()或html()传入jQuery对象即可：

// 插入所有hour元素到.container
$('.container').append($response.find('.hour').clone()); // 用clone()避免移动原DOM对象

• 插入文本内容：如果要插入文本拼接后的内容，先获取文本再拼接：

$('.container').append('<p>小时列表：' + hourTexts.join(' | ') + '</p>');

把上面的逻辑整合到Ajax回调里，就是这样：

$.ajax({
  url: '你的HTML文件路径',
  method: 'GET',
  success: function(data) {
    var $response = $(data);

    // 处理hour文本
    var hourTexts = $response.find('.hour').map(function() {
      return $(this).text().trim();
    }).get();
    console.log('所有小时文本：', hourTexts);

    // 处理第二个temp的data-code
    var secondTempCode = $response.find('.temp:eq(1)').data('code');
    console.log('第二个temp的data-code：', secondTempCode);

    // 插入到.container
    $('.container').append('<h3>小时信息</h3>');
    $('.container').append($response.find('.hour').clone());
    $('.container').append('<p>第二个温度编码：' + secondTempCode + '</p>');
  },
  error: function() {
    alert('Ajax请求失败，请检查路径是否正确');
  }
});

• 如果你的Ajax返回的是已经解析的DOM文档（比如responseType设为document），直接用$(data)包装也能正常工作；
• 用data('code')获取data-code属性时，如果属性值是数字或布尔值，jQuery会自动转换成对应类型，而attr('data-code')会返回字符串；
• 如果你只是需要元素的文本内容，不要直接使用DOM对象，一定要先调用.text()或.html()获取内容后再拼接。

内容的提问来源于stack exchange，提问作者peter