jquery: giriş seçici seçmiyor: öğeleri seç?

Question

JQuery'yi, giriş değerlerinden oluşan bir tablo boyunca yinelemek, her değeri almak ve bir dizeyle birleştirmek için kullanıyorum. Gönder düğmesine tıklandığında, :input ve :select olan giriş alanlarını birleştirmek istiyorum. JQuery giriş seçicinin de seçim alanlarını da seçtiğini okudum ama buradaki gibi görünmüyor. Birden çok türü find()'a aktarmayı denedim, ancak bu da işe yaramadı. Herhangi bir ipucu? İşte

jQuery

$("#SubmitButton").click(function(){ 
    var Teams = $(".NewTeam").length; //working 
    event.preventDefault(); 
    alert("clicked lets do ajax"); 
    for (var i=0; i < Teams; i++){ 
     $('.NewTeam').eq(i).find('input').each(function() { 
     alert(this.value); // "this" is the current element in the loop 
     }); 
    } 
}); 

HTML işaretleme olduğunu burada event.preventDefault(); kullanmış gibi

<div class = "teams"> 
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none"> 
    <table class = "PlayerInfoTable"> 
     <tr class = "PlayerRow"> 
     <td><strong style = "vertical-align:top">Player Info: </strong></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td> 
     </tr> 
    </table> 
    </fieldset> 
    <fieldset class="vfb-fieldset vfb-fieldset-1 str8-sports-roster-upload NewTeam" style = "display: none"> 
    <table class = "PlayerInfoTable"> 
     <tr class = "PlayerRow"> 
     <td><strong style = "vertical-align:top">Player Info: </strong></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Full Name" required/></td> 
     <td><input class="teamInput" name = "player[]" type="text" placeholder="Player Number" required/> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Jersey Size" required/><option selected = "selected">Jersey Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Short Size"><option selected = "selected">Short Size</option><option>Youth Small</option><option>Youth Medium</option><option>Youth Large</option><option>Youth X-Large</option><option>Small</option><option>Medium</option><option>Large</option><option>Extra Large</option></select> </td> 
     <td><select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> </td> 
     </tr> 
    </table> 
    </fieldset> 
</div> 

Answer 1

, değiştirmek gerekir $("#SubmitButton").click(function(){$("#SubmitButton").click(function(event){ için

EventHandler kullanırken, şunları yapmalısınız bir parametre ekleyin.

Sizin HTML'de

, ayrıca etiketler, hem başlangıç ​​ve bitiş, sen başladı ve düzgün etiketi sona değil gerektirir Eğer seçme kutusu kullanmış olması bir değişiklik, yapmalıdır, burada bu satır

olduğunu

<select class="teamInput" name = "player[]" type="text" placeholder="Male/Female" required</select> <option>Male</option><option>Female</option> 

değişiklik

<select class="teamInput" name = "player[]" placeholder="Male/Female" required><option>Male</option><option>Female</option></select> 

Ve Ayrıca, her elemanda gibi ortak .teamInput var senin Sınıf seçici, yararlanabilirler.

Böylelikle çalışmayı görmek için jQuery'yi izleyerek kolayca ekleyebilirsiniz.

$("#SubmitButton").click(function(event){ 
    event.preventDefault(); 
    $(".teamInput:input:visible").each(function() { 
     alert($(this).val()); 
    }); 
}); 

Çalışma Fiddle: https://jsfiddle.net/qffL6dsp/1/

Answer 2

basitçe

$('.NewTeam').eq(i).find(':input').each(function() { 

input ile

$('.NewTeam').eq(i).find('input').each(function() { 

değiştirin :input de diğer form-input elements seçer, sadece giriş etiketlerini seçer.

Answer 3

İlk Tıklama işlevine parametre olarak olay geçmesi gerekiyor ve sonra da yalnızca elemanlarını seçmek giriş öğeleri bulup olmaz 'girdi' gibi seçkin maddeyi bulmak için .each için seçici değiştirmeniz gerekir:

$("#SubmitButton").click(function(event){ 
    var Teams = $(".NewTeam").length; //working 
    event.preventDefault(); 
    alert("clicked lets do ajax"); 
    for (var i=0; i < Teams; i++){ 
     $('.NewTeam').eq(i).find('input, select').each(function() { 
      alert(this.value); // "this" is the current element in the loop 
      console.info($(this).text()); this will print in console in blue color the text of <option> as you have not assigned value attribute 
     }); 
    } 
});