How to append in multiple element JQuery

Question

I have a HTML like this :

<span class="section2 section4">hello</span>
<span class="section1">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

I need a jquery function able to give me this result :

<div class="tab" id="tab1"><span class="section1">World</span></div>
<div class="tab" id="tab2"><span class="section2">hello</span></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"><span class="section4">hello</span></div>
<div class="tab" id="tab5"></div>

My try so far :

$.each($(".tab"), function() {
    var id = $(this).attr('id').substring(3);

    if ($(".section" + id).length == 0) {
        return true;
    }
    $(".section" + id).removeClass("section" + id).appendTo($(this));
})

How can i improve my function for correct work?

JSFiddle

Answer 1

Iterate over the divs and based on the number in id append the cloned span element. Use append() method with callback which iterates over the element and appends the callback return value.

// get all span with classname start with `section`
var $sec = $('span[class^=section]');

// iterate over div element and append the returned value
$('div.tab').append(function() {
  // generate the class name from id
  var cls = 'section' + this.id.match(/\d+$/)[0];
  // filter element from $sec
  return $sec.filter('span.' + cls)
    // clone the element
    .clone()
    // updaet the class to remove other class name
    // you can also use `prop('className',cls)`
    .attr('class', cls);
});

// remove the span elements from dom
$sec.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="section2 section4">hello</span>
<span class="section1">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

UPDATE : If you want to maintain the other class or the span, then do something like.

// get all span with classname start with `section`
var $sec = $('span[class^=section]');

var $tab = $('div.tab');

// generate classnames based on tabs for removing later
var remove = $tab.map(function() {
  return 'section' + this.id.match(/\d+$/)[0];
}).get().join(' ');

// iterate over div element and append the returned value
$tab.append(function() {
  // generate the class name from id
  var cls = 'section' + this.id.match(/\d+$/)[0];
  // filter element from $sec
  return $sec.filter('span.' + cls)
    // clone the element
    .clone()
    // remove other class name
    .removeClass(remove).addClass(cls);
});

// remove the span elements from dom
$sec.remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="section2 section4">hello</span>
<span class="section1 section8">World</span>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>

Answer 2

The problem in your code is you are just removing the original element and appending to similar id div and for section2 and section4 span are same so when script works for 4th div it removes from 2nd element and append to 4th.

You need to use .clone() and let the original span be at it place just clone it and append on as much div as you want and hide the initial span with css.

 $.each($(".tab"), function() {
   var id = $(this).attr('id').substring(3);

   if ($(".span_wrap .section" + id).length != 0) {
     $(".span_wrap  .section" + id).removeClass("section" + id).clone().appendTo($(this));
   }

 })

.span_wrap span {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="span_wrap">
  <span class="section2 section4">hello</span>
  <span class="section1">World</span>
</div>

<div class="tab" id="tab1"></div>
<div class="tab" id="tab2"></div>
<div class="tab" id="tab3"></div>
<div class="tab" id="tab4"></div>
<div class="tab" id="tab5"></div>