jquery每個問題

所以服務器給了我一個隱藏輸入內的html塊。我需要採取這個塊（其中包含多個div），並移動這些div，但有一些邏輯。jquery每個問題

我的做法是把隱藏的輸入（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需要與相同數目的類。對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 divs，並且有12個.off divs，當應該只是這是我的代碼：

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

任何人都可以指向正確的方向嗎？我很好奇最有效的解決方案是什麼。

感謝，布賴恩

編輯：固定在我的示例代碼中的錯誤（「」被失蹤前，各階級）

來源

2011-06-02 brianandrich

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

我假設您沒有發佈的代碼中還有其他內容正在發生。

沒有任何更多的情況下，我建議是這樣的：

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

DEMO

這個工程的假設元素具有包含一些只有一個類下。也可能是因爲使用數字作爲類對選擇器不起作用，因爲類不允許以數字afaik開頭。如果不起作用，請添加其他字符。

來源

2011-06-02 15:38:30

謝謝！這比我的效率更高，額外的循環消失了（我認爲是克隆造成的）。 – brianandrich 2011-06-02 15:48:45

@brianandrich：看到我的更新，你的代碼工作正常。也許'history_temp' div沒有隱藏？ – 2011-06-02 15:49:31

是的，代碼比這複雜得多。還有其他問題導致問題 – brianandrich 2011-06-02 15:50:01

我喜歡Felix Klings的回答更好，但是我發帖子的時候也是因爲我完成了。我只是假設你有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); 
      } 
     } 
    });

來源

2011-06-02 15:42:15 Loktar

謝謝，Loktar。非常感激 – brianandrich 2011-06-02 15:49:00

jquery每個問題

回答

相關問題