Как получить все дочерние входы элемента div (jQuery)

Question

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");

Answer 1

Используйте его, не превышая:

$("#panel :input");

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

Answer 2

Вам нужно

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

или , в зависимости от того, что именно вы хотите (см. Ниже)

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

> ограничит детей, вы хотите, чтобы все потомки.

РЕДАКТИРОВАТЬ: Как отметил Ник, есть небольшая разница между $("#panel input") и $("#panel :input).

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

Answer 3

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

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

Answer 4

Если вы используете фреймворк, такой как 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');
});

В этом примере показано, как очистить входные данные, например, вам необходимо изменить его.

Answer 5

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

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

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

о доступных css-селекторах псевдоклассов вы можете прочитать здесь: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Answer 6

вот мой подход:

Вы можете использовать его в другом событии.

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>