How to merge parent content inside his first child?

Question

I'm not able to figure out how to merge parent content inside his first child with jQuery.

I want to merge all the elements (including text node) of an element within its <a>child.

I have this:

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

And I want to do this:

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

score 1 · Accepted Answer · answered Feb 26 '14 at 16:05

1

Finally, I found a solution using jQuery contents() function :

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

It's not very flexible, but it suits my needs. Thank you all!

answered Feb 26 '14 at 16:05

Shad Gagnon

475
1
7
20

score 0 · Answer 2 · edited Jun 18 '16 at 11:35

0

Hi you can do it that way:

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

I have created a fiddle here:

http://jsfiddle.net/j5Uqd/

edited Jun 18 '16 at 11:35

Box Box Box Box

5,094
10
49
67

answered Feb 26 '14 at 15:41

Marcel Ploch

26
1

Thank you for your answer! It work well if I use foreach with it. $('.row').each(function() { var test = $(this).html().replace($("
").append($(this).find('a').clone()).html(),''); $(this).html($(this).find('a').clone()).html(); $(this).find('a').append(test); }); – Shad Gagnon Feb 26 '14 at 16:10

BENARD Patrick · Answer 3 · 2014-02-26T20:04:18.420

Updated after comment

Fiddle : 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);
    });
});

Result :

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

Thank you for your answer. Unfortunately, it dont work with my example because children() dont get the text node. — Shad Gagnon, Feb 26 '14 at 16:02
I'm sorry for the time, I updated my answer, considering your comment, I didn't see take attention about this node, but now it's good :( — BENARD Patrick, Feb 26 '14 at 20:05

How to merge parent content inside his first child?

3 Answers3