.each()를 JQuery에서 사용할 수 없습니다.

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를 사용한다는 것입니다

같은 - 클래스 배치 형태의 어떤 요소에 대해 보이는 ... 당신은 ID를 가진 요소를 만드는 게재 위치 양식 (x)의

각 새로 만든 양식에 클래스를 추가하는 것이 좋습니다 (ID는 고유해야하지만 클래스에는 그러한 요구 사항이 없습니다).

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

하거나 원래이 클래스를 가지고 있는지 확인하십시오

이

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

그런 다음 .each가 그대로 작동합니다.

또 다른 옵션은 starts-with selector을 사용하는 것입니다하지만 난이 느려질 수 있습니다으로이 악화 옵션라고 생각 하는데요 : ID가 placement-form로 시작하는 요소에 대한

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

위의 모습을.

---

편집 : 여기에 작동하게 getPlacement 기능

1) 클래스에 ID placement_span으로 범위를 변경을 얻기에 몇 가지 포인터입니다. 당신은 이것들 중 많은 것으로 끝날 것이며 이전에 지적한 것처럼 이드는 유일해야합니다.이상 반복 경우에도 권리를 찾는 데 도움이됩니다 모든 placement_form의

2)이 (

3) 첫 번째 하나가 작동을 의미 첫 번째 일치하는 형태의 .each을 정지 한, return false 제거) 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" 모든 요소를 ​​반복 것입니다 코드입니다. 따라서 코드 스 니펫에서 클래스 이름이 "placement-form"이 아니므로 절대로 반복하지 않습니다.

"pagement-form"ID가있는 폼 내의 요소를 반복하려면 뭔가 시도 할 수 있습니다

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

Answer 3

당신이 시도 클래스의 이름으로 '배치 형태'

모든 DOM 요소를 선택하는

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

와 여기에 몇 가지 작업 코드는 양식에 클래스 이름을 추가하십시오.

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

Answer 4

코드에 따라 배치 양식 클래스로 모든 항목을 반복합니다. ID를 사용하려면 $ ('placement-form')이 필요합니다. 하지만 왜 단 하나의 항목 만있는 페이지에서 각각을 사용하고 있습니까? # 개의 배치 양식 요소가 여러 개있을 것으로 예상됩니까?

Answer 5

그것은 당신이 .placement 형식을 찾아서 클래스 선택기를 사용하고 있지만 행을 추가하는 함수에 그것은 단지 아이디 ATTR을 설정

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

Answer 6

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

해야한다. 어쩌면 당신은 addRow 함수에 클래스를 추가 할 수 있습니다. 그리고 나는 당신이 문제를 해결해야한다고 생각합니다.

참조 용으로 jquery documentation on selectors을 확인하십시오.