Cách nhận tất cả các đầu vào con của một phần tử div (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>

Tôi cần phải chọn tất cả các đầu vào trong div cụ thể.

Điều này không hoạt động:

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

Sử dụng nó mà không lớn hơn:

$("#panel :input");

Các >phương tiện chỉ trực tiếp con của phần tử, nếu bạn muốn tất cả trẻ em cho dù độ sâu chỉ cần sử dụng một khoảng trắng.

Bạn cần

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

hoặc , tùy thuộc vào chính xác những gì bạn muốn (xem bên dưới)

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

ý >chí hạn chế cho trẻ em, bạn muốn tất cả con cháu.

EDIT: Như Nick đã chỉ ra, có một sự khác biệt tinh tế giữa $("#panel input")và $("#panel :input).

Cái đầu tiên sẽ chỉ lấy các phần tử của kiểu đầu vào, nghĩa là <input type="...">, nhưng không <textarea>, <button>và <select>các phần tử. Cảm ơn Nick, tôi đã không biết điều này và sửa bài viết của tôi cho phù hợp. Còn lại cả hai tùy chọn, vì tôi đoán OP cũng không biết điều đó và - về mặt kỹ thuật- đã yêu cầu đầu vào ... :-)

Phương pháp 'find' có thể được sử dụng để lấy tất cả các đầu vào con của một container đã được lưu vào bộ nhớ cache để lưu lại tìm kiếm nó (trong khi phương thức 'trẻ em' sẽ chỉ nhận được các con ngay lập tức). ví dụ

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

Nếu bạn đang sử dụng một khung như Ruby on Rails hoặc Spring MVC, bạn có thể cần sử dụng div với dấu ngoặc vuông hoặc ký tự khác, không cho phép bạn có thể sử dụng document.getElementByIdvà giải pháp này vẫn hoạt động nếu bạn có nhiều đầu vào cùng loại.

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');
});

Ví dụ này cho thấy cách xóa đầu vào, ví dụ bạn sẽ cần thay đổi nó.

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

nên làm việc :-)

> sẽ chỉ tìm nạp trẻ em trực tiếp, không có trẻ em nào
: dành cho việc sử dụng các lớp giả, vd. : di chuột, v.v.

bạn có thể đọc về các bộ chọn css có sẵn của các lớp giả ở đây: http://docs.jquery.com/DOM/Traversing/Selector#CSS_Selector

đây là cách tiếp cận của tôi:

Bạn có thể sử dụng nó trong sự kiện khác.

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>