एक 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>

मुझे विशेष div में सभी इनपुट का चयन करने की आवश्यकता है।

यह काम नहीं कर रहा है:

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

Answer 1

से अधिक के बिना इसका उपयोग करें:

$("#panel :input");

>साधन केवल प्रत्यक्ष तत्व के बच्चों, अगर आप सभी बच्चों को कोई गहराई बात चाहते हैं तो बस एक अंतरिक्ष का उपयोग करें।

Comments

दिलचस्प ... अब मैं उलझन में हूँ ... यह :छद्म वर्गों के लिए है, है ना? लेकिन हम एक तत्व प्रकार का चयन करना चाहते हैं। क्यों :?

— ममनोसिन

@mnosyn - यह एक अन्य प्रकार का चयनकर्ता है जैसे `: चेकबॉक्स ', विवरण के लिए यहाँ देखें: api.jquery.com/input-selector और यहाँ इनकी अधिक पूरी सूची है: api.jquery-

— निक Craver

Answer 2

आप की जरूरत है

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

या , आप जो चाहते हैं उसके आधार पर (नीचे देखें)

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

>बच्चों को प्रतिबंधित करेगा, आप सभी सन्तान चाहते हैं।

संपादित करें: जैसा कि निक ने बताया है, के बीच एक सूक्ष्म अंतर है $("#panel input")और $("#panel :input)।

पहले वाला केवल टाइप इनपुट के तत्वों को फिर से प्राप्त करेगा <input type="...">, लेकिन ऐसा नहीं है <textarea>, <button>और <select>तत्व। धन्यवाद निक, यह खुद नहीं जानता था और तदनुसार मेरी पोस्ट को ठीक किया। दोनों विकल्पों को छोड़ दें, क्योंकि मुझे लगता है कि ओपी को इस बात की जानकारी नहीं थी कि - और भी-इनपुट के लिए कहा गया ... :-)

Comments

तो,: इनपुट सभी इनपुट का चयन करेगा / सेलेक्ट / टेक्सारिया फ़ील्ड? यकायक?

— यूरी

अनिवार्य रूप से, हाँ। चयनकर्ता मैचों की एक सरणी देता है, इसलिए मुझे लगता है कि आप यह कह सकते हैं कि यह 'एक बार में' करता है, हालांकि मुझे पूरी तरह से यकीन नहीं है कि आप इसका क्या मतलब है ...

— mnemosyn

मेरा मतलब है, "सभी एक साथ" बस उस चयनकर्ता के साथ। ": इनपुट चयनकर्ता विवरण: सभी इनपुट, टेक्सारिया, चयन और बटन तत्वों का चयन करता है।" इसके बारे में पता नहीं था, मैं इसे अब से :)

— यूरी

Answer 3

'खोज' विधि का उपयोग कंटेनर के सभी बाल इनपुट प्राप्त करने के लिए किया जा सकता है जो पहले से ही इसे फिर से देखने के लिए सहेजे गए हैं (जबकि 'बच्चों की विधि केवल तत्काल बच्चे प्राप्त करेंगे)। जैसे

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

Comments

यह मेरे लिए एकदम सही था - मैं .each () का उपयोग करने वाले तत्वों पर लूपिंग कर रहा हूं, जिसका अर्थ है कि लूप के भीतर मैं $ (यह) का उपयोग करके वर्तमान तत्व तक पहुंच रहा हूं। नतीजतन, मैं बहुत से प्रदर्शन करने में असमर्थ हूं जो अन्यथा जवाब में सुझाए गए हैं। - इसके बजाय मैं $ (यह) .find ("इनपुट") करने में सक्षम हूं; धन्यवाद।

— djbp

Answer 4

यदि आप रूबी या स्प्रिंग एमवीसी पर रूबी जैसे ढांचे का उपयोग कर रहे हैं, तो आपको चौकोर ब्रेसिज़ या अन्य वर्णों के साथ 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');
});

यह उदाहरण दिखाता है कि इनपुट कैसे साफ़ करें, उदाहरण के लिए आपको इसे बदलने की आवश्यकता होगी।

Answer 5

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

कार्य करना चाहिए :-)

> केवल सीधे बच्चों को लाएगा, बच्चों के बच्चों
को नहीं: छद्म कक्षाओं का उपयोग करने के लिए है, उदा। : होवर, आदि।

आप यहाँ छद्म वर्गों के उपलब्ध सीएसएस चयनकर्ताओं के बारे में पढ़ सकते हैं: http://docs.jquery.com/DOM/Traversing/Selectors#CSS_Selectors

Comments

@ कोहेन - :inputएक चयनकर्ता के रूप में अच्छी तरह से है, api.jquery.com/category/selectors/form-selectors अगर उसके पास एक <textarea>बटन था या inputउसे नहीं मिलेगा :input, तो, एक अंतर है।

— निक Craver

+1, इसलिए बाहर जाना> चाल चलेगा। अब मैं भी यह पृष्ठ पर मैं सिफारिश की .... पाया

— फिल Rykoff

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>