Не могу заставить .each () работать в JQuery

Question

Относящиеся к этому вопросу здесь .

Я пытаюсь перебрать ряд форм на странице и сделать некоторые "вещи" с указанными формами, но я не могу заставить его работать. Код ниже:

HTML:

<div id="placement">
<h3>Placement</h3>
<form action="" id="placement-form">
  <input type="text" class="site" value="Site" title="Site" onfocus="clickclear(this, 'Site')" onblur="clickrecall(this,'Site')" />
  <input type="text" class="placementdesc" value="Placement description" title="Placement description" onfocus="clickclear(this, 'Placement description')" onblur="clickrecall(this,'Placement description')" />
  <input type="text" class="placementtype" value="Placement Type" title="Placement Type" onfocus="clickclear(this, 'Placement Type')" onblur="clickrecall(this,'Placement Type')" />
  <input type="text" class="size" value="Size" title="Size" onfocus="clickclear(this, 'Size')" onblur="clickrecall(this,'Size')" />
  <input type="text" class="pricing" value="Pricing" title="Pricing" onfocus="clickclear(this, 'Pricing')" onblur="clickrecall(this,'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 id="placement_span"></span>
</form> 
<input type="button" value="+" class="addRow" />   
 </div>

jQuery (это для кнопки «addRow»):

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

Вот скрипт, который я пытаюсь заставить работать:

function getPlacement() {
    $('.placement-form').each(function(){
        var site, placement_desc, placementtype, size, pricing, servetype;  
        site = document.getElementById("site").value;
        placement_desc = document.getElementById("placementdesc").value;
        placementtype = document.getElementById("placementtype").value;
        size = document.getElementById("size").value;
        pricing = document.getElementById("pricing").value;
        servetype = document.getElementById("servetype").value;
        document.getElementById("placement_span").innerHTML = '<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype;
        return false;
    });
}

Насколько я понимаю, функция .each () заключается в том, что она будет проходить через DOM для каждого экземпляра этой формы с именем "place-form", а затем выполнять следующие несколько операторов. Это неверно? Буду признателен за помощь в этом!

Answer 1

Ошибка, которую вы допустили, состоит в том, что ваш селектор в команде .each использует .placement-form - который ищет любой элемент с class position-form ... вы создаете элементы с id формы размещения (x).

Я бы предложил добавить класс к каждой вновь создаваемой форме (поскольку идентификаторы должны быть уникальными, но классы не имеют такого требования).

var formCopy = $("#placement-form").clone().addClass('placement-form');

или просто убедитесь, что оригинал имеет этот класс:

<form action="" id="placement-form" class="placement-form">

Тогда ваш .each должен работать как есть.

Другим вариантом является использование селектора запуска-с , но я бы посчитал это худшим вариантом, так как он будет медленнее:

$('[id^="placement-form"]').each(...)

Вышеприведенный поиск ищет любой элемент, идентификатор которого начинается с placement-form.

---

Редактировать: Вот несколько советов, как заставить работать getPlacement функцию

1) Измените диапазон с идентификатором placement_span на класс. В конечном итоге вы получите множество из них, и, как указывалось ранее, идентификаторы должны быть уникальными. Это также поможет вам в поиске нужного при цикле по всем placement_form х

2) Удалите return false, так как это останавливает .each в первой соответствующей форме (то есть работает только первая)

3) Измените getPlacement, чтобы использовать jQuery, особенно предоставляя второй параметр селектору, чтобы сузить поиск до текущей формы. Вот некоторый рабочий код:

$('.placement-form').each(function(){
    var $form = $(this);
    var site, placement_desc, placementtype, size, pricing, servetype;  
    site =  $(".site",$form).val()
    placement_desc = $(".placementdesc",$form).val();
    placementtype = $(".placementtype",$form).val();
    size = $(".size",$form).val();
    pricing = $(".pricing",$form).val();
    servetype = $(".servetype",$form).val()
    $(".placement_span",$form).html('<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype);
    });
}

Живой пример: http://jsfiddle.net/zu8ZJ/

Answer 2

Код

$('.placement-form').each(function(){

Итерирует по всем элементам с class="placement-form".Следовательно, в своем фрагменте кода вы никогда не будете выполнять итерации по чему-либо, поскольку нет ничего с именем класса «place-form»

Для итерации по элементам в форме с идентификатором «pagement-form» вы могли быпопробуйте что-то вроде

$("#placement-form *").each(function(){

Answer 3

$('.placement-form').each(function(){

Вы используете селектор классов, ища .placement-form, но в вашей функции для добавления строки он только устанавливает id attr.Может быть, вы можете добавить класс в функцию addRow, и я думаю, что это должно решить вашу проблему.

Обратитесь к документации jquery по селекторам для справки.

Answer 4

должно быть

$('.placement-form').each(function(){//etc etc})

Answer 5

Согласно вашему коду, он будет перебирать все записи с классом формы размещения. Вам нужно $ ('# place-form'), чтобы использовать id. Но почему вы используете каждый из них на странице с одной записью - ожидаете ли вы иметь несколько # элементов формы размещения?

Answer 6

С помощью

 $('.placement-form').each(function(){

вы выбираете все элементы dom с именем класса 'place-form'

Попробуйте добавить имя класса в форму:

<h3>Placement</h3>
    <form action="" id="placement-form" class="placement-form">