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 div就应该有只是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;
    } 
  });

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

谢谢，布赖恩

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

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

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

Answer 2

我喜欢菲利克斯·克林斯的回答更好，但是我的帖子也是因为我完成了它。我假设你有一个名为1-9的课程，如果你碰巧超过9，他会更有包容性，并且更加优化。

<强> Live Demo

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

Jquery每个问题

2 个答案: