Как получить все дочерние входы элемента 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, то есть <input type="...">, но не элементы <textarea>, <button>и <select>элементы. Спасибо Ник, сам не знал об этом и исправил свой пост соответственно. Оставил оба варианта, потому что я полагаю, что ОП тоже не знал об этом и, технически, попросил ввести данные ... :-)

Метод 'find' может быть использован для получения всех дочерних входов контейнера, который уже был кэширован, чтобы сохранить его при повторном поиске (тогда как метод 'children' получит только непосредственные дочерние элементы). например

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

Если вы используете фреймворк, такой как Ruby on Rails или Spring MVC, вам может понадобиться использовать div с квадратными или другими символами, которые вы не можете использовать, 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");

должно сработать :-)

> выбирает только прямых детей, но не детей.
the: предназначен для использования псевдоклассами, например. : зависание и т. д.

Вы можете прочитать о доступных 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>