วิธีรับอินพุตย่อยทั้งหมดขององค์ประกอบ 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>

ฉันต้องเลือกอินพุตทั้งหมดใน div เฉพาะ

สิ่งนี้ไม่ทำงาน:

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

ใช้มันโดยไม่ต้องยิ่งใหญ่กว่านี้

$("#panel :input");

>หมายถึงเฉพาะโดยตรงเด็กขององค์ประกอบถ้าคุณต้องการที่เด็กทุกคนไม่ว่าระดับความลึกเพียงแค่ใช้พื้นที่

คุณต้องการ

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

หรือขึ้นอยู่กับสิ่งที่คุณต้องการ (ดูด้านล่าง)

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

>จะ จำกัด ให้กับเด็กที่คุณต้องการลูกหลาน

แก้ไข: ในฐานะที่เป็นนิคชี้ว่ามีความแตกต่างที่ลึกซึ้งระหว่างและ$("#panel input")$("#panel :input)

คนแรกที่จะดึงองค์ประกอบของประเภทการป้อนข้อมูลที่เป็น<input type="...">แต่ไม่ได้<textarea>, <button>และ<select>องค์ประกอบ ขอบคุณ Nick ไม่รู้จักตัวเองและแก้ไขโพสต์ของฉันตามนั้น ออกจากตัวเลือกทั้งสองเพราะฉันเดาว่า OP ไม่ได้ตระหนักถึงสิ่งนั้นและ -technically- ถามถึงอินพุต ... :-)

วิธีการ 'พบ' สามารถนำมาใช้จะได้รับปัจจัยการผลิตลูกทั้งหมดของภาชนะที่ได้ถูกเก็บไว้ชั่วคราวเพื่อประหยัดมองมันขึ้นมาอีกครั้ง (ในขณะที่วิธีการที่ 'เด็ก' จะได้รับเด็กทันที) เช่น

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

หากคุณกำลังใช้กรอบเช่น Ruby on Rails หรือฤดูใบไม้ผลิ MVC คุณอาจจำเป็นต้องใช้ divs กับตารางการจัดฟันหรือตัวอักษรอื่น ๆ ที่ไม่ได้รับอนุญาตให้คุณสามารถใช้document.getElementByIdและแก้ปัญหานี้ยังคงทำงานได้ถ้าคุณมีปัจจัยหลายกับประเภทเดียวกัน

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

ตัวอย่างนี้แสดงให้เห็นถึงวิธีการล้างปัจจัยการผลิตสำหรับคุณเช่นคุณจะต้องเปลี่ยนมัน

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

ควรทำงาน :-)

> การจะดึงเด็กโดยตรงเด็กเด็กไม่มี
ที่สำหรับใช้หลอกชั้นเรียนเช่น : เลื่อน ฯลฯ

คุณสามารถอ่านเกี่ยวกับ css-selectors ของ pseudo-classes ที่มีอยู่ได้ที่นี่: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

นี่คือแนวทางของฉัน:

คุณสามารถใช้มันในเหตุการณ์อื่น ๆ

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>