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

Question

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

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

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

JSFiddle [здесь] [1]

UPDATE:

Так я изменен мой код т o использовать классы для входов/текстовых полей и теперь просто клонировать формы (так как они имеют уникальный идентификатор). У меня возникли проблемы с итерацией через каждый экземпляр формы, чтобы сделать «что-то» (т. Е. Конкатенировать строки)!

Просьба обновить fiddle. Код для фактического конкатенирования строк выполняется, я просто не знаю, как правильно использовать функцию .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 для связывания. Не уверен, был ли он у вас в исходном коде, но я добавил чек, чтобы убедиться, что он только вызывает/очищает, если значения являются значениями по умолчанию (например, метки оригинала или пустой строки).

Большая часть того, с чем возникла проблема, находится в функции 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 для этого вместо вашей собственной сериализации строк. Если вам нужна дополнительная информация по любому из этих сообщений, задайте новый вопрос.

---

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

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

$('.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(); 
});