Question

如何找到每个<p>元素中包含的<td>元素的类名，然后将该类添加到<td>元素的类列表中？

<table>
    <tr>
        <td colspan="1">
            <p class="Hello_blue">Hello Stack Overflow1</p>
        </td>
        <td rowspan="1" colspan="2">
            <p class="Hello_red">Hello Stack Overflow2</p>
            <p class="Hello_red">defines red color,that class want to apply to</p>
        </td>
        <td rowspan="1" colspan="1">
            <p class="Hello_orange">Hello Stack Overflow3</p>
        </td>
    </tr>
</table>

<td>元素将具有这样的类

<td rowspan="1" colspan="1" class="blue">...</td>
<td rowspan="1" colspan="1" class="red">...</td>
<td rowspan="1" colspan="1" class="orange">...</td>

Answer 1

选择<p>个元素的所有<td>元素，然后迭代并将每个<p>元素的类指定给其父元素。

(function(){
    window.onload = function() {
        "use strict";
        var paragraphs = document.querySelectorAll('td p'), paragraph, i;
        for(i = 0; (paragraph = paragraphs[i]); i++) {
            paragraph.parentNode.className += paragraph.className.replace('hello_','');
        }
    }
})();

Answer 2

您可以在表格中搜索p标签，然后找到最近的父td并指定班级名称。

使用普通Javascript：

// convert "Hello_blue" to "blue"
function convertClassName(src) {
    return src.replace(/^.*?_/, "");
}

var pTags = document.querySelectorAll("table p");
for (var i = 0; i < pTags.length; i++) {
    pTags[i].parentNode.className += " " + convertClassName(pTags[i].className);
}

工作演示：http://jsfiddle.net/jfriend00/6bvwu5qL/

使用jQuery：

// convert "Hello_blue" to "blue"
function convertClassName(src) {
    return src.replace(/^.*?_/, "");
}

$("table p").each(function() {
    $(this).closest("td").addClass(convertClassName(this.className));
});

工作演示：http://jsfiddle.net/jfriend00/36oejbx4/

在加载DOM之后，应该运行这些代码块中的任何一个。这意味着你要么将它们放在文档最末尾的脚本标记中，要么在加载DOM之后从一个未调用的函数中调用它们，或者从事件处理程序中调用它们（如{{1} }）等待DOM加载。

将课程应用于

2 个答案: