Question

我成功克隆了一系列<td>并将它们置于另一系列<td> s中，但是当我尝试用<td>替换新的<divs>时} <td>被剥夺，没有被替换。

基本上，我在这里取第一组<td>并分别在第二组<td> s中预先设置每个的克隆。这将是HTML / DOM预克隆：

<tr>
    <td class="weekTitles 1" nowrap="nowrap">Sun Jun 28</td>
    <td class="weekTitles 2" nowrap="nowrap">Mon Jun 29</td>
    <td class="weekTitles 3" nowrap="nowrap">Tue Jun 30</td>
    <td class="weekTitles 4" nowrap="nowrap">Wed Jul 01</td>
    <td class="weekTitles 5" nowrap="nowrap">Thu Jul 02</td>
    <td class="weekTitles 6" nowrap="nowrap">Fri Jul 03</td>
    <td class="weekTitles 7" nowrap="nowrap">Sat Jul 04</td>
</tr>
<tr>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
    <td class="eventText" valign="top"></td>
</tr>

第二组<td>的摘录显示克隆/前置工作正常：

<tr>
    <td class="eventText" valign="top">
        <td class="weekTitles 1" nowrap="nowrap" style="background: red none repeat scroll 0% 0%;">Sun Jun 28</td>
    </td>
    <td class="eventText" valign="top">
        <td class="weekTitles 2" nowrap="nowrap" style="background: red none repeat scroll 0% 0%;">Mon Jun 29</td>
    </td>

...等...

我的javascript通过.css背景颜色函数正常工作（用作测试，看看我是否正确定位了新的克隆元素），但是一旦我到了replaceWith，新的克隆内部{{1}这样就被剥夺了：

<td>

...等...

当期望的结果看起来像这样（但不是因为我的脚本坏了）：

<tr>
    <td class="eventText" valign="top">
        Sun Jun 28
    </td>
    <td class="eventText" valign="top">
        Mon Jun 29
    </td>

...等...

这是我的脚本，通过.css函数但在此之后失败：

<tr>
    <td class="eventText" valign="top">
        <div class="weekTitles 1" nowrap="nowrap" style="background: red none repeat scroll 0% 0%;">Sun Jun 28</div>
    </td>
    <td class="eventText" valign="top">
        <div class="weekTitles 2" nowrap="nowrap" style="background: red none repeat scroll 0% 0%;">Mon Jun 29</div>
    </td>

简而言之，我认为这完全归结于我未能正确掌握如何编写“$（newElem）.each ...”函数来用DIV替换TD。它完全取消了TD，而不是用DIV替换它们。

任何和所有指针都非常赞赏。谢谢。

Answer 1

您无需克隆元素 - 您只需要创建一个新的class元素，然后将text和nowrap应用于原始元素。

请注意，CSS样式应该通过样式表应用，而不是内联，并且white-space: nowrap属性已过时。您应该再次使用CSS $('td.weekTitles').each(function(i) { $('<div />', { className: $(this).attr('class') }).text($(this).text()).appendTo('.eventText:eq(' + i + ')'); });。试试这个：

.eventText div {
    background: red none repeat scroll 0% 0%;
    white-space: nowrap;
}

package.SaveAs(newFile);

Example fiddle

jquery - 克隆td，prepend，并将新td更改为div

1 个答案: