Question

如何找到div中的所有表并重置其类和属性？

我的结构是这样的：

<body>
    <header/>
    <main>
        <div class="content">
            <p>Some text</p>
            <p>Some text</p>
            <div>Some text</div>
            <table cellpadding="2" border="2" class="randomClass">...</table>
            <p>Some text</p>
            <table cellspacing="1" border="1" class="otherClass">...</table>
            <p>Some text</p>
            <div>Some text</div>
            <p>Some text</p>
        </div>
    </main>
    <footer/>
</body>

我需要在div中找到所有带有“内容”类的表，并删除celpadding，cellborder，border，class等并设置一个新的干净类，因此最终看起来像这样：

<body>
    <header/>
    <main>
        <div class="content">
            <p>Some text</p>
            <p>Some text</p>
            <div>Some text</div>
            <table class="cleanTable">...</table>
            <p>Some text</p>
            <table class="cleanTable">...</table>
            <p>Some text</p>
            <div>Some text</div>
            <p>Some text</p>
        </div>
    </main>
    <footer/>
</body>

我尝试获取所有元素，然后将它们进行教学：

var content = $(".content");
content.each(function (i, el) {
    console.log(el);
    el.removeClass();
});

尽管这确实找到了正确的元素，但这给了我无法在其上应用方法的字符串： jquery-3.3.1.slim.min.js:2 Uncaught TypeError: el.removeClass is not a function

我试图让它自己找到一个对象，但这似乎无济于事。也没有错误：

var content = $(".content");
content.each(function (i, el) {
    var table = $('table', this);
    table.removeClass();
    table.addClass('cleanTable');
});

任何想法如何使这项工作有效吗？ PS：到目前为止，我只尝试过重置类，还没有检查如何重置其他属性。

Answer 1

使用JQuery，您可以一次修改多个元素而无需循环：

$(".content table").removeClass().addClass("cleanTable");

应该可以解决问题。

要删除属性，只需以相同的方式继续：

 $(".content table").removeAttr("border").removeAttr("cellpadding"); //...

Answer 2

尝试：您可以通过遍历content div中的每个表来删除分配的类并添加cleanTable。您可以从表格中删除属性。参见下面的代码

$(function(){
  $(".content table").each(function(){
      $(this).removeClass().addClass('cleanTable');
      $(this).removeAttr('border');
      $(this).removeAttr('cellpadding');
  });
});

Answer 3

您可以尝试另一种更“粗糙”的方法，只刮掉表中的所有内容，然后一次运行即可重新构建所有内容。

$('.content').each(function() {
     $(this).html(($(this).html()).replace(/<table[^>]+>/ig, "<table class='cleanTable'>"));
});

jQuery：在div中查找所有表并重置类和属性

3 个答案: