Jak uzyskać wszystkie podrzędne dane wejściowe elementu 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>

Muszę wybrać wszystkie dane wejściowe w określonym div.

To nie działa:

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

Użyj go bez większego niż:

$("#panel :input");

Te >środki tylko bezpośrednie dzieci elementu, jeśli chcesz, aby wszystkie dzieci bez względu na głębokość prostu używać spacji.

Potrzebujesz

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

lub , w zależności od tego, czego dokładnie chcesz (patrz poniżej)

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

>będą ograniczać się do dzieci, chcesz wszystkich potomków.

EDYCJA: Jak zauważył Nick, istnieje subtelna różnica między $("#panel input")a $("#panel :input).

Pierwsza z nich pobierze tylko elementy typu input, to znaczy <input type="...">, ale nie <textarea>, <button>i <select>elementy. Dzięki Nick, sam o tym nie wiedziałem i odpowiednio poprawiłem mój post. Zostawił obie opcje, ponieważ wydaje mi się, że OP również nie był tego świadomy i - technicznie - poprosił o dane wejściowe ... :-)

Metoda „find” może zostać użyta do pobrania wszystkich danych wejściowych podrzędnych kontenera, który został już zapisany w pamięci podręcznej, aby zapisać go przy ponownym wyszukiwaniu (podczas gdy metoda „dzieci” pobierze tylko bezpośrednie elementy podrzędne). na przykład

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

Jeśli używasz frameworka takiego jak Ruby on Rails lub Spring MVC, może być konieczne użycie elementów div z nawiasami kwadratowymi lub innymi znakami, których nie możesz używać, document.getElementByIda to rozwiązanie nadal działa, jeśli masz wiele wejść tego samego typu.

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

Ten przykład pokazuje, jak wyczyścić dane wejściowe, na przykład musisz to zmienić.

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

powinno działać :-)

> będzie pobierać tylko bezpośrednie dzieci, żadnych dzieci dzieci
: służy do używania pseudoklas, np. : hover itp.

o dostępnych selektorach css pseudoklas można przeczytać tutaj: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

oto moje podejście:

Możesz go użyć w innym przypadku.

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>