无法让.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()函数的理解是,它将为名为"placement-form"的表单的每个实例循环遍历DOM,然后运行接下来的几个语句.这是不正确的？希望对此有所帮助!

Answer 1

你犯的错误是.each命令中的选择器使用.placement-form - 它查找具有类 placement-form的任何元素...你正在创建id为placement-form(x)的元素.

我建议为每个新创建的表单添加一个类(因为id必须是唯一的,但是类没有这样的要求).

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

或者只是确保原件有这个类:

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

然后你.each应该按原样工作.

另一个选择是使用启动选择器,但我认为这是更糟糕的选择,因为它会更慢:

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

上面查找id开头的任何元素placement-form.

编辑:这里有一些指向让你的getPlacement功能正常工作

1)将带有id的范围更改placement_span为类.你将最终得到许多这些,并且如前所述,id必须是唯一的.这也可以帮助你在循环所有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/