javascript - 如何在他的第一个孩子中合并父内容？

Question

我无法弄清楚如何将他的第一个孩子中的父内容与 jQuery 合并。

我想合并其<a>子元素中的所有元素（包括文本节点）。

我有这个：

<td class="row">
  <a href="#">
    <span class="iconouter">
                <img class="icon" src="...">
            </span> Type of document
  </a>
  : Form
  <span class="type-nb">(1)</span>
</td>

我想这样做：

<td class="row">
  <a href="#">
    <span class="iconouter">
                    <img class="icon" src="...">
                </span> Type of document: Form <span class="type-nb">(1)</span>
  </a>
</td>

Answer 1

最后，我找到了一个使用 jQuery contents() 函数的解决方案：

$('.row').each(function() {
    $(this).find('a').append($(this).contents()[1], $(this).contents()[2]);
});

它不是很灵活，但它适合我的需要。谢谢你们！

Answer 2

评论后更新

小提琴：http: //jsfiddle.net/WaW27/

HTML：

<table>
    <tr>
        <td>
           <a href="#">
             <span class="iconouter">
               <img class="icon" src="...">
             </span>
              Type of document
           </a> 
            : Form 
           <span class="type-nb">(1)</span>
       </td>
    </tr>
</table>

JS：

$(document).ready(function(){
    $('td').each(function(){
        $content = $(this).children().first().append(  
            $(this).html().replace(   
                $('<div>').append( $(this).children().first().clone() ).html(), '' )  
         ); 
        $(this).html('').append($content);
    });
});

结果 ：

 <tr>
    <td>
      <a href="#">
            <span class="iconouter">
            <img class="icon" src="...">
            </span>
             Type of document


             : Form 
           <span class="type-nb">(1)</span>
        </a>
     </td>
</tr>

Answer 3

嗨，你可以这样做：

var test = jQuery('.row').html().replace($("<div />").append($('.row a').clone()).html(),'');
jQuery('.row').html($('.row a').clone()).html();
jQuery('.row a').append(test);

我在这里创建了一个小提琴：

http://jsfiddle.net/j5Uqd/