एक div टैग के भीतर आईडी द्वारा तत्व प्राप्त करने का सरल तरीका?

Question

अगर मैं प्रश्न दोहराता हूं तो कृपया मुझे क्षमा करें।

मेरे पास एचटीएमएल है कि एक div टैग के अंदर सभी तत्वों में अलग-अलग आईडी है, मान लीजिए कि मुझे पहले से ही div का संदर्भ मिल गया है, क्या तत्व के तत्व को उस div के सभी तत्वों को फिर से बिना किसी तत्व के प्राप्त करने का कोई आसान तरीका है?

<div id="div1" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 

Answer 1

आप ऐसा कुछ करने का प्रयास कर सकते हैं।

नमूना मार्कअप।

<div id="div1" > 
    <input type="text" id="edit1" /> 
    <input type="text" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" id="edit3" /> 
    <input type="text" id="edit4" /> 
</div> 

जावास्क्रिप्ट

function GetElementInsideContainer(containerID, childID) { 
    var elm = {}; 
    var elms = document.getElementById(containerID).getElementsByTagName("*"); 
    for (var i = 0; i < elms.length; i++) { 
     if (elms[i].id === childID) { 
      elm = elms[i]; 
      break; 
     } 
    } 
    return elm; 
} 

डेमो: http://jsfiddle.net/naveen/H8j2A/

एक बेहतर तरीके के रूप में द्वारा nnnnnn

function GetElementInsideContainer(containerID, childID) { 
    var elm = document.getElementById(childID); 
    var parent = elm ? elm.parentNode : {}; 
    return (parent.id && parent.id === containerID) ? elm : {}; 
} 

डेमो का सुझाव दिया: http://jsfiddle.net/naveen/4JMgF/

यह

var e = GetElementInsideContainer("div1", "edit1"); 

Answer 2

आप ऐसा नहीं करना चाहती:

यहाँ मेरी नमूना एचटीएमएल है। यह एक ही id के साथ एक से अधिक तत्व रखने के लिए अवैध HTML है। ब्राउज़र उस अच्छी तरह से इलाज नहीं करेंगे, और आपके पास अपरिभाषित व्यवहार होगा, जिसका अर्थ है कि आपको पता नहीं है कि जब आप उस आईडी द्वारा कोई तत्व चुनते हैं तो ब्राउज़र आपको क्या देगा, यह अप्रत्याशित हो सकता है।

आप एक वर्ग का उपयोग करना चाहिए, या बस आदानों के माध्यम से पुनरावृत्ति और एक सूचकांक का ट्रैक रखने के। इस तरह

कोशिश कुछ:

var div2 = document.getElementById('div2'); 
for(i = j = 0; i < div2.childNodes.length; i++) 
    if(div2.childNodes[i].nodeName == 'INPUT'){ 
     j++; 
     var input = div2.childNodes[i]; 
     alert('This is edit'+j+': '+input); 
    } 

JSFiddle

Answer 3

दुर्भाग्य से यह अमान्य HTML है। एक संपूर्ण आईडी फ़ाइल में एक आईडी अद्वितीय होना चाहिए।

जब आप जावास्क्रिप्ट के document.getElementById() का उपयोग करते हैं तो यह ब्राउज़र पर निर्भर करता है, यह कौन सा तत्व वापस आ जाएगा, ज्यादातर यह किसी दिए गए आईडी के साथ पहला है।

आपके पास कोई और मौका के रूप में अपनी आईडी class विशेषता का उपयोग कर फिर से आवंटित करने के लिए, या वैकल्पिक रूप होगा।

Answer 4

दी गई ID केवल एक पृष्ठ में एक बार इस्तेमाल किया जा सकता। यह एक ही आईडी के साथ कई ऑब्जेक्ट्स रखने के लिए अवैध HTML है, भले ही वे पृष्ठ के विभिन्न हिस्सों में हों। तब

<div id="div1" > 
    <input type="text" class="edit1" /> 
    <input type="text" class="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" class="edit1" /> 
    <input type="text" class="edit2" /> 
</div> 

, तो आप इस तरह एक सीएसएस चयनकर्ता के साथ div1 में पहला आइटम मिल सकता है:

आप इस के लिए अपने HTML को बदल सकता है jQuery में

#div1 .edit1 

पर:

$("#div1 .edit1") 

या, यदि आप अपने divs में से एक में आइटम पुनरावृति करना चाहते हैं, तो आप इसे इस तरह से कर सकते हैं:

$("#div1 input").each(function(index) { 
    // do something with one of the input objects 
}); 

मैं jQuery या YUI की तरह एक ढांचे का उपयोग नहीं कर सकता है, तो मैं कड़ाके की धूप मिल जाने के लिए और शामिल है कि यह के चयनकर्ता तर्क के लिए (यह एक ही चयनकर्ता इंजन के रूप में jQuery के अंदर है), क्योंकि डोम हेरफेर बड़े पैमाने पर है चाहता हूँ एक अच्छा चयनकर्ता पुस्तकालय के साथ आसान है।

अगर मैं भी कड़ाके की धूप (जो डेवलपर उत्पादकता में भारी ड्रॉप होगा) का उपयोग नहीं कर सकता है, यदि आप सादे डोम कार्यों का उपयोग एक दिया तत्व के बच्चों के पार करने के लिए कर सकता है।

आप डीओएम फ़ंक्शंस जैसे कि बच्चे नोड्स या फर्स्ट चाइल्ड और अगली सिब्लिंग का उपयोग करेंगे और आपको यह सुनिश्चित करने के लिए नोड टाइप टाइप करना होगा कि आपको केवल वही तत्व मिलते हैं जिन्हें आप चाहते थे। मैं कोड को इस तरह से कभी नहीं लिखता क्योंकि यह चयनकर्ता पुस्तकालय का उपयोग करने से बहुत कम उत्पादक है।

Answer 5

HTML आईडी में अद्वितीय होना चाहिए। मेरा सुझाव है कि आप अपना कोड इस तरह से बदलें:

<div id="div1" > 
    <input type="text" name="edit1" id="edit1" /> 
    <input type="text" name="edit2" id="edit2" /> 
</div> 
<div id="div2" > 
    <input type="text" name="edit1" id="edit3" /> 
    <input type="text" name="edit2" id="edit4" /> 
</div> 

Answer 6

Sample Html code 
<div id="temp"> 
     F1 <input type="text" value="111"/><br/> 
     F2 <input type="text" value="222"/><br/> 
     F3 <input type="text" value="333"/><br/> 
     Type <select> 
     <option value="A">A</option> 
     <option value="B">B</option> 
     <option value="C">C</option> 
     </select> 
     <input type="button" value="Go" onclick="getVal()"> 
    </div> 

Javascript 

    function getVal() 
    { 
     var test = document.getElementById("temp").getElementsByTagName("input"); 
     alert("Number of Input Elements "+test.length); 
     for(var i=0;i<test.length;i++) 
     { 
      if(test[i].type=="text") 
      { 
      alert(test[i].value); 
      } 
     } 
     test = document.getElementById("temp").getElementsByTagName("select"); 
     alert("Select box "+test[0].options[test[0].selectedIndex].text); 
    } 

By providing different tag names we can get all the values from the div. 

Answer 7

var x = document.getElementById("parent").querySelector("#child"); 
// don't forget a # 

या

var x = document.querySelector("#parent").querySelector("#child"); 

या

var x = document.querySelector("#parent #child"); 

या

var x = document.querySelector("#parent"); 
var y = x.querySelector("#child"); 

की तरह कॉल

उदाहरण के लिए।

var x = document.querySelector("#div1").querySelector("#edit2"); 

Answer 8

आप इस कोशिश कर सकते हैं: $ ("# div1 # edit1")