Div öğesinin tüm alt girdileri nasıl alınır (jQuery)

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

Belirli div tüm girişleri seçmek gerekir.

Bu çalışmıyor:

var i = $("#panel > :input");

Şundan büyük olmadan kullanın:

$("#panel :input");

Bu >, sadece elemanın doğrudan çocuklarını ifade eder, derinlik ne olursa olsun tüm çocukları istiyorsanız sadece bir boşluk kullanın.

İhtiyacın var

var i = $("#panel input"); 

veya tam olarak ne istediğinize bağlı olarak (aşağıya bakın)

var i = $("#panel :input"); 

>Eğer tüm alt istiyorum, çocuklara sınırlayacaktır.

EDIT: Nick'in işaret ettiği gibi, $("#panel input")ve arasında ince bir fark var $("#panel :input).

İlki sadece tip girişi, unsurlarını alır <input type="...">, ancak <textarea>, <button>ve <select>unsurları. Teşekkürler Nick, bunu kendim bilmiyordum ve görevimi buna göre düzelttim. Her iki seçeneği de bıraktım çünkü sanırım OP bunun da farkında değildi ve -teknik olarak- girdiler istedi ... :-)

'Find' yöntemi, yeniden bakmak için önceden önbelleğe alınmış bir kabın tüm alt girdilerini almak için kullanılabilir (oysa 'children' yöntemi yalnızca hemen çocukları alır). Örneğin

var panel= $("#panel");
var inputs = panel.find("input");

Ruby on Rails veya Spring MVC gibi bir çerçeve kullanıyorsanız, kare parantezleri veya diğer karakterleri olan div'leri kullanmanız gerekebilir, bu izin verilemez document.getElementByIdve aynı türde birden fazla girişiniz varsa bu çözüm yine de çalışır.

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

Bu örnekler, girişlerin nasıl temizleneceğini gösterir, örneğin, değiştirmeniz gerekir.

var i = $("#panel input");

çalışmalı :-)

> sadece doğrudan çocukları getirir, hiçbir çocuk çocuğu yoktur
: sözde sınıfları kullanmak içindir, örn. : fareyle üzerine gelme vb.

sözde sınıfların mevcut css seçicileri hakkında buradan bilgi edinebilirsiniz: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

İşte yaklaşımım:

Başka bir olayda kullanabilirsiniz.

var id;
$("#panel :input").each(function(e){	
  id = this.id;
  // show id 
  console.log("#"+id);
  // show input value 
  console.log(this.value);
  // disable input if you want
  //$("#"+id).prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="Po Val" /></td>
    </tr>
  </table>
</div>