Jquery Each Problem

Question

So the server is giving me a block of html within a hidden input. I need to take this block (which contains multiple divs) and move those divs, but with some logic.

My approach is to take the value of the hidden input (html block) and append it into a newly created hidden div:

  var history = $("input[name=history]").val();
  $("#global_wrapper").after("<div id='history_temp' style='display:none;'></div>");
  $("#history_temp").html(history);

Here is an example of what the HTML block looks like:

<div class="off 1"></div>
<div class="off 1"></div>
<div class="off 2"></div>
<div class="off 3"></div>

The .off will always be there and the number class will range from 1-9

Based on the number class, I need to move each of these divs into an existing html block that looks like this:

<div class="on 1"></div>
<div class="on 2"></div>
<div class="on 3"></div>

The logic is that each .off div needs to be appended after the .on div with the same number class so that the end result would look like this:

<div class="on 1"></div>
<div class="off 1"></div>
<div class="off 1"></div>
<div class="on 2"></div>
<div class="off 2"></div>
<div class="on 3"></div>
<div class="off 3"></div>

My attempt was to run an each function for each .off div and then set up an if this.hasClass for each number div, but it was duplicating the .off divs and there were like 12 .off divs when there should have been just 3. Here is my code:

   $("#history_temp .off").each(function(){
    if ($(this).hasClass("1")) {
      $(this).clone().insertAfter(".on.1");
    }
    else if ($(this).hasClass("2")) {
      $(this).clone().insertAfter(".on.2");
    }
    else if ($(this).hasClass("3")) {
      $(this).clone().insertAfter(".on.3");
    }
    else if ($(this).hasClass("4")) {
      $(this).clone().insertAfter(".on.4");
    }
    else if ($(this).hasClass("5")) {
      $(this).clone().insertAfter(".on.5");
    }
    else if ($(this).hasClass("6")) {
      $(this).clone().insertAfter(".on.6");
    }
    else if ($(this).hasClass("7")) {
      $(this).clone().insertAfter(".on.7");
    }
    else if ($(this).hasClass("8")) {
      $(this).clone().insertAfter(".on.8");
    }
    else if ($(this).hasClass("9")) {
      $(this).clone().insertAfter(".on.9");
    }
    else {
      return false;
    } 
  }); 

Could anyone point me in the right direction? I'm curious as to what the most efficient solution would be.

Thanks, Brian

EDIT: Fixed an error in my example code (was missing the "." before each on class)

Answer 1

FWIW, your code works fine: http://jsfiddle.net/7XWuN/2/

I assume there is something else going on in the code you did not post.

Without any more context, I would suggest something like this:

$("#history_temp .off").each(function(){
    var n = this.className.match(/\d+/)[0];
    $(this).insertAfter('.on.' + n);
});

DEMO

This works under the assumption that the elements have only one class that contains a number. It could also be that using numbers as classes does not play well with the selector, as classes are not allowed to start with a number afaik. If it does not work, prepend some other character.