Як отримати всі дочірні введення елемента 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>

Мені потрібно вибрати всі входи в конкретному розділі.

Це не працює:

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

Використовуйте його не більше ніж:

$("#panel :input");

В >означає тільки прямі діти елемента, якщо ви не хочете , щоб всі діти незалежно від глибини просто використовувати простір.

Тобі потрібно

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

або , залежно від того, що саме ви хочете (див. нижче)

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

>обмежуватиме дитина, ви хочете , щоб все нащадок.

EDIT: Як Нік зазначив, що є тонка різниця між $("#panel input")і $("#panel :input).

Перший отримає лише елементи типу введення, тобто <input type="...">, але не <textarea>, <button>та <select>елементи. Дякую Ніку, я сам цього не знав і відповідно виправив свою посаду. Залишив обидва варіанти, тому що я думаю, що ОП про це не знав і - технічно - попросив ввести ... :-)

Метод "знайти" може бути використаний для отримання всіх дочірніх даних про контейнер, який уже був кешований, щоб заощадити його знову (тоді як метод "діти" отримає лише безпосередніх дітей). напр

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

Якщо ви використовуєте таку рамку, як Ruby on Rails або Spring 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-селектори псевдокласів тут: 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>