Question

我有这段代码

    $(textObject).children().each(function() {
        $(this).removeAttr('style');
        console.log('removing style from first level element: '+this);

    });

但是我希望它能影响所有嵌套元素，这个只会影响第一级子元素。我也试过

$(this).children().removeAttr('style');

哪个不起作用。

我也试过

$(this).children().css('font-size','');

也不起作用。

我想要完成的事情可能很清楚。

Answer 1

尝试

$(this).find('*').removeAttr('style');

Demo Here

Answer 2

尝试

$(this).find('[style]').addBack().removeAttr('style');

演示：Fiddle

Answer 3

您可以使用星号使用纯CSS执行此操作。

您尚未指定textObject所指的元素，但为了论证，我们假设它是一个ID为element的div

#element * { font-size: inherit; }

或者强制此样式覆盖已在子元素上设置的任何其他内容，请使用!important

#element * { font-size: inherit !important; }

Answer 4

您可以使用以下方式访问所有儿童：

$(textObject).find('*').each(function() {
        $(this).removeAttr('style');
        console.log('removing style from first level element: '+this);
});

如果您不需要记录它，只需执行：

$(textObject).find('*').removeAttr('style');

Answer 5

在jQuery的find（）方法中使用*。 children()将循环到一个级别，而find()将循环到嵌套级别。所以你的代码将是

$(this).find('*').removeAttr('style');

，工作代码为here

Answer 6

$(this).children().removeAttr('style');

无效，因为.children()只会访问$(this)的直接子女。

有多种方法可以做到这一点。您可以使用jQuery选择器的第二个参数使其充当过滤器。

// Select everything starting at whatever 'this' is refering to
$('*', this).removeAttr('style');

可以找到演示here。

或者您可以按照Rex描述的方式使用。

Answer 7

使用类名称为子元素设置样式并通过使用jQuery切换类名来删除样式不是很容易吗？

此标记：

<div class="parent fancy-styles">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

使用这个CSS：

.fancy-styles .child {
  /* styling */
}

然后触发：

$(".parent").toggleClass("fancy-styles")

从所有子元素中删除样式（包括嵌套）

7 个答案: