jquery

Question

我成功克隆了一系列 <td>s 并将它们放置在另一系列 <td>s 中，但是当我尝试用 [= 替换新的 <td>s 时20=]，<td> 将被剥离，而不是被替换。

基本上，我在这里使用第一组 <td>，并分别在第二组 <td> 中分别添加每个的克隆。这将是 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> 中的一个片段显示 cloning/prepending 工作正常：

<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，新克隆的内部 <td>s 被剥离：

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

...等...

当期望的结果应该是这样的时候（但不是因为我的脚本坏了）：

<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>

...等...

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

$('.page-calendar .bodyClass tr:nth-child(1) > td.weekTitles').each(function() {
         count = count + 1;
         //console.log(count);
         //console.log(this);
         $(this).clone().prependTo( $(this).closest('table').find('tr:nth-child(2) td:nth-child(' + count + ')') );
// below variable is how I am identifying new element
         var newElem = $('.page-calendar .bodyClass tr:nth-child(2) td.eventText:nth-child(' + count + ') td.weekTitles')[0];
         //console.log(newElem);
         $(newElem).css('background','red');
// this is where it breaks below, no replace of TD with DIV
         $(newElem).each(function (){
            $(this).replaceWith( $(this).html()
            .replace(/<td/gi, '<div')
            .replace(/<\/td>/gi, '</div>')
             );
         });
    });

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

非常感谢任何和所有指针。谢谢你。

Answer 1

您不需要克隆元素 - 您需要做的就是创建一个新的 div 元素并将原始元素的 class 和 text 应用到它。

请注意，CSS 样式应通过样式表而非内联应用，并且 nowrap 属性已过时。您应该再次使用 CSS、white-space: nowrap。试试这个：

$('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;
}

Example fiddle

jquery - 克隆 td、添加前缀并将新的 td 更改为 div

jquery - clone td, prepend, and change new td to div

clone

prepend

replacewith