Выполните итерацию по DOM, а затем объедините полученные текстовые значения

Question

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

поэтому я работал над небольшим веб-приложением, которое объединяет строки текста (взятые из полей ввода и выпадающих списков). Это достигается нажатием кнопки «генерировать», которая в фоновом режиме запускает функции для объединения указанных строк. Это работало нормально, но я только недавно представил кнопку «addRow», которая с помощью JQuery клонирует одну из форм и все ее содержимое, а затем изменяет идентификатор для каждого элемента в строке (добавляя 1, затем 2, затем 3 В зависимости от количества нажатий кнопки «+».

Если имеется более одной строки, как я могу выполнить итерацию по функции, которая объединяет строку для реплицируемой строки? Мой код, вероятно, объяснит это лучше:

JSFiddle [здесь] [1]

UPDATE:

Итак, я исправил свой код, чтобы использовать классы для полей ввода / текста, и теперь просто клонировал формы (так как они имеют уникальный идентификатор). У меня возникают проблемы при переборе каждого экземпляра формы, чтобы сделать что-то (т.е. объединить строки)!

Вот обновленная скрипка . Код для фактической конкатенации строк готов, я просто не знаю, как правильно использовать функцию .each() в JQuery!

Answer 1

Сначала я удалил ваши встроенные обработчики щелчков и фокусов ... вместо этого мы свяжем их с jQuery. Я также добавил класс для всех входов, которые вы бы назвали фокусом и размытием, под названием inFieldLabel, чтобы упростить связывание.

HTML

<div id="placement">
    <h3>Placement</h3>
    <form action="" id="placement-form" class="placement-form">
      <input type="text" class="site inFieldLabel" value="Site" title="Site" />
      <input type="text" class="placementdesc inFieldLabel" value="Placement description" title="Placement description" />
      <input type="text" class="placementtype inFieldLabel" value="Placement Type" title="Placement Type" />
      <input type="text" class="size inFieldLabel" value="Size" title="Size" />
      <input type="text" class="pricing inFieldLabel" value="Pricing" title="Pricing" />
      <select class="servetype" title="Serve Type">
        <option>STD – Standard trafficking type (ie, regular display banners)</option>
        <option>SSV – Site-served (no ad server tracking)</option>
        <option>PIX – Pixel</option>
        <option>CCD – Click command</option>
        <option>PCC – Pixel and Click command</option>
        <option>RMV – Rich Media Video</option>
        <option>RME – Rich Media Expand</option>
        <option>RMO – Rich Media Other</option>
      </select>
      <span class="placement_span"></span>
    </form>   
</div>
<input type="button" value="+" class="addRow" />
<input type="button" id="generate" value="Generate" />

Итак, теперь у нас есть функции clickclear и clickrecall, определенные для использования в качестве hnadlers для привязки. Не уверен, что он у вас в исходном коде, но я добавил проверку, чтобы убедиться, что он только вызывает / сбрасывает, если значения являются значениями по умолчанию (например, метка orig. Или пустая строка).

Основная часть проблем, с которыми вы столкнулись, находится в функции generatePage.

JS

  var uniqueId = 1;
  var generatePage = function(evt){
    $('.placement-form').each(function(i, frm){
      frm = $(frm); // wrap in jQuery
      // i is the interation counter
      // frm is the form element
      var site, placement_desc, placementtype, size, pricing, servetype;    
      site = frm.find(".site").val();
      placement_desc = frm.find(".placementdesc").val();
      placementtype = frm.find(".placementtype").val();
      size = frm.find(".size").val();
      pricing = frm.find(".pricing").val();
      servetype = frm.find(".servetype").val();
      var content = '<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype;
      frm.find('.placement_span').html(content);
    });
  };

  var clickclear = function (evt){
    var ele = $(this);
    evt.preventDefault();

    if(ele.val() == ele.attr('title')){
      ele.val(''); // if the value is a "label" then clear it for the user
    }

    return false;
  };

  var clickrecall = function(evt) {
    var ele = $(this);
    evt.preventDefault();


    if(ele.val() == '') {
      // if the user hasnt entered any text then revert to the "label"
      ele.val(ele.attr('title'));
    }

    return false;
  };
  $('.placement-form .inFieldLabel').focus(clickclear).blur(clickrecall);

  $('.addRow').click(function() {
      var formCopy = $("#placement-form").clone(true);
      var formCopyId = 'placement-form'+uniqueId;
      formCopy.attr('id',formCopyId);
      $('#placement').append(formCopy);
      uniqueId++;
  });

  $('#generate').click(generatePage);

Увидеть это в действии: http://jsfiddle.net/JUfgd/

Однако я не уверен, почему вы пытаетесь объединить эти строки или почему вы используете несколько форм. Я предполагаю, что вам нужно передать все эти данные где-то в какой-то момент, и для этого было бы более целесообразно иметь единственную форму с элементами, имеющими name атрибутов в обозначении массива (например, name="site[0]"), тогда, когда вы отправляете Вы можете перебрать на стороне сервера все, что сгруппировано. Конечно, это может быть трудно иметь дело с клонированием, поэтому альтернативным подходом было бы оставить фактические входные данные вне формы, а затем собрать данные с помощью js, подобно тому, как вы уже это делаете - только это будет более разумно использовать JSON для этого вместо вашей собственной пользовательской сериализации строк. Если вам нужна дополнительная информация по этому посту, новый вопрос.

---

Хорошо, что я хотел бы сделать - присвоить уникальный идентификатор форме или добавить контейнер-обертку в форму с уникальным идентификатором, тогда я бы использовал классы вместо идентификаторов для входов / элементов управления. Таким образом, вы можете клонировать форму или ее контейнер, и тогда все дочерние элементы изменят один идентификатор в этом элементе верхнего уровня. Затем вы можете использовать селектор типа $(yourUniqueId .theInputClass), который значительно упрощает управление.

Тогда вы можете просто перебрать каждую форму ... для простоты, я бы, вероятно, добавил бы к ней класс тоже jsut на случай, если на той же странице есть другие не связанные формы, поэтому это будет что-то вроде:

$('.placementForm').each(function(i, formEle){
   // do stuff to the form
});

Answer 2

Код, который вы написали для клонирования всех ваших элементов:

$('#' + formId).find('input,select').each(function(){
     $(this).attr('id', $(this).attr('id') + uniqueId);
});

уже в правильном соседстве. Поскольку вы используете jQuery, почему бы не сделать что-то подобное, чтобы получить строку со всеми значениями ваших входных данных и выбрать:

var str = '';
$('#' + formId).find('input, select').each(function(){
     str += $(this).val();
});

И, конечно, если вы хотите собирать входные данные и выбирать в любом месте страницы, а не только эту форму, вы можете сделать это:

var str = '';
$('input, select').each(function(){
     str += $(this).val();
});