如何用jQuery获取div及其内部所有元素的class属性

安全阿岳

2026-5-21

解决获取指定div及其内部所有元素class属性的问题

Got it, I see the issue—using $(div).attr('class') only grabs the class of the div itself, not the classes of all elements inside it. Let's fix this with a straightforward jQuery solution that matches your expected output.

方法1：获取div自身及所有后代元素的class

如果需要包含div内部所有层级的元素（不只是直接子元素），可以用这个方法：

// 选中目标div（这里用类选择器，你也可以用id或其他选择器）
const $targetDiv = $('.limit-text');

// 获取div自身 + 所有内部元素的集合
const $allElements = $targetDiv.find('*').addBack();

// 收集所有非空的class属性
const allClassNames = $allElements
  .map(function() {
    return $(this).attr('class');
  })
  .get() // 把jQuery对象转为普通数组
  .filter(className => className); // 过滤掉没有class的元素

// 转换成你需要的逗号分隔格式
const result = allClassNames.join(', ');
console.log(result);
// 输出：limit-text, h1 title-cover, icon-svg hide-for-print, copy-cover

方法2：仅获取div自身及直接子元素的class

如果只需要目标div和它的直接子元素（就像你的示例结构那样），把find('*')换成children()即可：

const $targetDiv = $('.limit-text');
const $allElements = $targetDiv.children().addBack();

// 后续步骤和上面一致
const allClassNames = $allElements
  .map(function() {
    return $(this).attr('class');
  })
  .get()
  .filter(className => className);

const result = allClassNames.join(', ');
console.log(result);