div 요소의 모든 자식 입력을 얻는 방법 (jQuery)


158

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

답변:


301

다음보다 큰 값으로 사용하십시오 :

$("#panel :input");

>수단에만 직접 모든 아이들이 더 깊이 상관하지 않으 요소의 아이들은 단지 공간을 사용합니다.


3
흥미 롭다 ... 이제 혼란스러워 ... :의사 클래스를위한 것인가? 그러나 요소 유형을 선택하려고합니다. 왜 :?
mnemosyn

11
, 자세한 내용은 여기를 참조한다 '확인란 : - @mnemosyn이`와 같은 선택의 또 다른 유형입니다 api.jquery.com/input-selector는 그리고 여기에 이들의 더 완전한 목록입니다 : api.jquery.com/category/selectors/form 선택기
Nick Craver

74

당신은 필요

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

또는 , 정확히 원하는 내용에 따라 (아래 참조)

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

>모든 자손을 원하는, 아이들에게 제한됩니다.

편집 : Nick이 지적했듯이 $("#panel input")와 사이에는 미묘한 차이가 $("#panel :input)있습니다.

첫번째가 아니라 형 입력 요소 검색 할 <input type="...">수 있지만 <textarea>, <button><select>소자. 고마워 Nick, 나 자신을 몰랐고 그에 따라 내 게시물을 수정했습니다. OP가 그것을 알지 못하고 기술적으로 입력을 요구했기 때문에 두 옵션을 모두 남겨 두었습니다 ... :-)


따라서 : input은 모든 입력 / 선택 / 텍스트 필드를 선택합니까? 한 번에?
Yuri

본질적으로 그렇습니다. 선택기는 일치하는 배열을 반환하므로, '한 번에'할 수 있다고 생각할 수 있지만, 그 의미가 무엇인지 완벽하지는 않습니다.
mnemosyn

1
나는 그 선택기와 함께 "모두 함께"를 의미합니다. ": 입력 선택기 설명 : 모든 입력, 텍스트 영역, 선택 및 버튼 요소를 선택합니다." 그것에 대해 몰랐다, 나는 지금부터 그것을 사용할 것이다 :)
Yuri

50

'find'메소드는 이미 캐시 된 컨테이너의 모든 하위 입력을 가져 와서 다시 검색 할 수 있도록하는 데 사용될 수 있습니다 ( 'children'메소드는 즉시 하위 만 가져옵니다). 예 :

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

5
이것은 나에게 완벽했습니다. 루프에서 $ (this)를 사용하여 현재 요소에 액세스한다는 것을 의미하는 .each ()를 사용하여 요소를 반복합니다. 결과적으로, 나는 대답에서 제안 된 것을 많이 수행 할 수 없습니다. 대신에 나는 $ (this) .find ( "input"); 감사.
djbp

29

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');
});

이 예제는 입력을 지우는 방법을 보여줍니다. 예를 들어 입력을 변경해야합니다.


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

작동해야합니다 :-)

>는 직접적인 어린이 만 가져오고, 어린이의 어린이
는 없습니다 . : 호버 등

의사 클래스의 사용 가능한 CSS 선택기에 대한 내용은 여기를 참조 하십시오. http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors


6
@henchman - :input,뿐만 아니라 선택입니다 api.jquery.com/category/selectors/form-selectors 그가이 있다면 <textarea>또는 버튼을 input, 그것을 발견하지 않을 :input것, 그래서 차이가 있습니다.
Nick Craver

+1이므로>를 사용하지 않으면 트릭이 수행됩니다. 지금 나는 또한 내가 추천 한 페이지에서 그것을 발견했다 ....
Phil Rykoff

9

여기 내 접근 방식이 있습니다 :

다른 이벤트에서 사용할 수 있습니다.

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>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.