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

Question

Как получить все дочерние входы элемента 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");

758 6

jQuery jquery-selectors

6 ответов:

Comments

Ничего не найдено.

Nick Craver · Accepted Answer · 2010-03-08 18:13:22

используйте его без более чем:
$("#panel :input");
The > означает только прямые дочерние элементы, если вы хотите, чтобы все дети независимо от глубины всего использовать пространство.

mnemosyn · Accepted Answer · 2010-03-08 18:24:38

вам нужно
var i = $("#panel input"); 
или в зависимости от того, что именно вы хотите (см. ниже)
var i = $("#panel :input"); 
the > ограничится детьми, вы хотите всех потомков.

EDIT: как отметил Ник, есть тонкая разница между $("#panel input") и $("#panel :input).

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

Rob Willis · Accepted Answer · 2010-12-21 18:51:49

метод ' find 'можно использовать для получения всех дочерних входов контейнера, который уже был кэширован, чтобы сохранить его снова (в то время как метод' children ' получит только непосредственные дочерние элементы). например,
var panel= $("#panel");
var inputs = panel.find("input");

Paulo Fidalgo · Accepted Answer · 2013-08-20 16:09:34

Если вы используете рамки, такие как 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');
});
в этом примере показано, как очистить входные данные, например, вам нужно будет изменить его.

Phil Rykoff · Accepted Answer · 2010-03-08 18:13:34

var i = $("#panel input");
должно работать :-)

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

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

Uttam Kumar Roy · Accepted Answer · 2015-12-23 08:21:39

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

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

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>