JQuery Каждая проблема - PullRequest
Новая
       24

JQuery Каждая проблема

2 голосов
/ 02 июня 2011

Итак, сервер предоставляет мне блок html внутри скрытого ввода.Мне нужно взять этот блок (который содержит несколько элементов div) и переместить эти элементы div, но с некоторой логикой.

Мой подход заключается в том, чтобы взять значение скрытого ввода (блок html) и добавить его во вновь созданныйhidden 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

Исходя из класса чисел, мне нужно переместить каждый из этих элементов в существующий HTML-блок, который выглядит следующим образом: 

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

Логика заключается в том, что каждый элемент .off должен бытьдобавляется после .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 и затем установить if this.hasClass для каждого числового div, но он дублировал .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;
    } 
  });

Может кто-нибудь указать мнеправильное направление?Мне любопытно, каким было бы наиболее эффективное решение.

Спасибо, Брайан

РЕДАКТИРОВАТЬ: Исправлена ​​ошибка в моем примере кода (пропускал "." Перед каждым в классе)

Ответы [ 2 ]

3 голосов
/ 02 июня 2011

FWIW, ваш код работает нормально: http://jsfiddle.net/7XWuN/2/

Я предполагаю, что в коде, который вы не опубликовали, происходит что-то еще.

Без лишнего контекста я бы предложил что-то вроде этого: 

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

DEMO

Это работает в предположении, что элементы имеют только один класс, который содержит число. Возможно также, что использование чисел в качестве классов не очень хорошо работает с селектором, поскольку классы не могут начинаться с числа afaik. Если это не работает, добавьте другой символ.

0 голосов
/ 02 июня 2011

Мне нравится, что Феликс Клингс отвечает лучше, но я тоже опубликую свой пост только потому, что закончил. Мой просто предполагает, что у вас есть классы с именами 1-9, он более всеобъемлющий, если вам выпало больше 9, и более оптимизирован.

Демонстрация в реальном времени 

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