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

Ответ 1

Используйте его не более:

$("#panel :input");

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

Ответ 2

Вам нужно

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

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

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

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

ИЗМЕНИТЬ: Как заметил Ник, есть тонкая разница между $("#panel input") и $("#panel :input).

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

Ответ 3

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

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

Ответ 4

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

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

Ответ 5

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

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

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

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

Ответ 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>