javascript - 删除子div

Question

我有 div 列表，我想要实现的是删除子项 <div class="lol">999</div> ，并将其替换为 <div class="lol">111</div> .

我确实知道如何获取它们的数据方 block 。我尝试使用 $(this).removeClass('column div');但效果并不好。

访问http://jsfiddle.net/jm4eb/5/之前:

<div class="column" data-square="1-4">
<div class="green">999</div>
</div>


<div class="column" data-square="1-5">
<div class="blue">111</div>
</div>

之后

<div class="column" data-square="1-4">

</div>


<div class="column" data-square="1-5">
<div class="green">999</div>
</div>

<小时/>

嗨，这就是应用程序的工作原理。假设有10个div框，每个div框都有一个内框12，用户单击一个div并单击另一个div。因此，应删除单击的第二个 div 的内部 div，并替换为单击的第一个 div 的内部 div。但外部 div 唯一唯一的字段是 data-square 。访问http://jsfiddle.net/jm4eb/11/因此，当第一个 div 的内部 div 代替单击的第二个 div 的内部 div 时。第二个 div 的内部 div 在替换之前被删除

Answer 1

更改文本值而不是删除然后创建新值怎么样？

$( '.column' ).each( function () {

    // Save $( this ) and $( this ).next() since we're going to use them multiple times
    var self = $( this ),
        next = self.next()

    // For each of them, save the firstChild's text
    var val = self.children().first().text()

    // Now, check if the next DIV exists
    if ( next ) {

        // If it does, change the text of its first child with the "val" variable
        next.children().first().text( val )
    }
} )

编辑:将 .find( '>:first-child' ) 替换为 .children().first()。不敢相信 jQuery 没有办法填充 firstElementChild。

@Esailija 也认为缺少这个方法很奇怪。所以他创建了一个jQuery plugin 。这意味着我可以使用 self.firstChild().text() 而不是 self.children().first().text()。