Question

与此问题相关here。

我正在尝试遍历页面上的一系列表单并使用所述表单执行一些“事情”，但我无法使其工作。代码如下：

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（x）的 id 创建元素。

我建议为每个新创建的表单添加一个类（因为id必须是唯一的，但是类没有这样的要求）。

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

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

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

然后你的.each应该按原样运作。

另一种选择是使用starts-with selector，但我认为这是更糟糕的选择，因为它会变慢：

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

以上内容查找id以placement-form开头的任何元素。

编辑：以下是让getPlacement功能正常工作的一些指示

1）将标识为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/

Answer 2

用

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

您正在选择所有类名为“placement-form”的dom元素

尝试将类名添加到表单中：

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

Answer 3

根据您的代码，它将使用一类展示位置表单遍历所有条目。你需要$（'＃placement-form'）才能使用id。但是，为什么你在一个只有一个条目的页面上使用每个 - 你期望有多个#position-form元素吗？

Answer 4

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

您正在通过查找.placement-form来使用类选择器，但在您添加行的函数中，它仅设置id attr。也许你可以在addRow函数中添加类，我认为这应该可以解决你的问题。

检查jquery documentation on selectors以供参考。

Answer 5

应该是

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

无法让.each（）在JQuery中工作

5 个答案: