Jquery每一个问题

Question

所以服务器在隐藏输入中给了我一个 html 块。我需要获取这个块（其中包含多个 div）并移动这些 div，但需要一些逻辑。

我的方法是获取隐藏输入（html 块）的值并将其附加到新创建的隐藏 div 中：

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

这是 HTML 块的示例：

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

.off 将始终存在，并且数字类的范围将在从 1-9

基于数字类，我需要将每个 div 移动到现有的 html 块中，如下所示：

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

逻辑是每个 .off div 需要附加在具有相同数字类的 .on div 之后所以最终的结果看起来像这样：

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

我的尝试是为每个 .off div 运行每个函数，然后为每个数字 div 设置一个 if this.hasClass，但它复制了 .off div，并且有大约 12 个.off divs ，而应该只有 3 个。这是我的代码：

   $("#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;
    } 
  }); 

有人能指出我正确的方向吗？我很好奇最有效的解决方案是什么。

谢谢， Brian

编辑：修复了我的示例代码中的一个错误（在每堂课之前缺少“.”）

Answer 1

FWIW，您的代码工作正常： http://jsfiddle.net/7XWuN/2/

我假设有您未发布的代码中是否发生了其他事情。

没有更多上下文，我会建议这样的内容：

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

DEMO

这有效假设元素只有一个包含数字的类。也可能是使用数字作为类不能很好地与选择器配合，因为不允许类以数字开头。如果不起作用，请添加一些其他字符。

Answer 2

我更喜欢菲利克斯·克林斯的回答，但我也会发布我的答案，因为我完成了它。我的只是假设你有名为 1-9 的类，如果你碰巧超过 9，他的则更具包容性，并且更加优化。

现场演示

   $("#history_temp .off").each(function(){
       for(var i=1; i < 10; i++){
             if ($(this).hasClass(i)) {
               $(this).clone().insertAfter(".on." + i);
             }
       }
  });