Un modo semplice per ottenere l'elemento da id all'interno di un tag div?

Question

Per favore perdonami se ripeto la domanda.

Ho HTML che tutti gli elementi all'interno di un tag div hanno id differente, supponiamo di aver già ottenuto il riferimento al div, esiste un modo semplice per ottenere l'elemento dal suo id senza iterare tutti gli elementi con quel div?

qui è il mio codice HTML di esempio:

<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

Si può provare qualcosa di simile.

Markup di esempio.

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

JavaScript

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

Demo: http://jsfiddle.net/naveen/H8j2A/

Un metodo migliore, come suggerito da nnnnnn

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

Demo: http://jsfiddle.net/naveen/4JMgF/

Chiamatela come

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

Answer 2

Non si vuole fare questo. È HTML non valido avere più di un elemento con lo stesso id. I browser non lo tratteranno bene e avremo un comportamento indefinito, il che significa che non hai idea di ciò che il browser ti darà quando selezioni un elemento con quell'id, potrebbe essere imprevedibile.

Dovresti utilizzare una classe o semplicemente scorrere gli input e tenere traccia di un indice.

provare qualcosa di simile:

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

Purtroppo questo non è valido HTML. Un ID deve essere univoco nell'intero file HTML.

Quando si utilizza JavaScript document.getElementById(), dipende dal browser, quale elemento restituirà, principalmente è il primo con un dato ID.

Non avrai altre possibilità di riassegnare i tuoi ID o, in alternativa, di utilizzare l'attributo class.

Answer 4

Un dato ID può essere utilizzato solo una volta in una pagina. È HTML non valido avere più oggetti con lo stesso ID, anche se si trovano in parti diverse della pagina.

Si potrebbe cambiare il codice HTML a questo:

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

Poi, si potrebbe ottenere il primo elemento div1 con un selettore CSS come questo:

#div1 .edit1 

On in jQuery:

$("#div1 .edit1") 

Oppure, se si desidera iterare gli elementi in una delle tue div, puoi farlo in questo modo:

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

Se non ho potuto usare un framework come jQuery o YUI, mi piacerebbe andare a prendere Sizzle e comprendono che per la logica di essa la selezione (che è lo stesso motore di selezione, come si trova all'interno di jQuery) perché manipolazione del DOM è massicciamente più facile con una buona libreria di selettori.

Se non potessi utilizzare anche Sizzle (che sarebbe un notevole calo della produttività degli sviluppatori), potresti utilizzare semplici funzioni DOM per attraversare i figli di un determinato elemento.

Dovresti utilizzare le funzioni DOM come childNodes o firstChild e nextSibling e dovresti controllare il nodeType per assicurarti di avere solo il tipo di elementi che desideri. Non scrivo mai il codice in questo modo perché è molto meno produttivo rispetto all'utilizzo di una libreria di selettori.

Answer 5

Negli ID HTML dovrebbe essere univoco. Ti suggerisco di cambiare il tuo codice a qualcosa del genere:

<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 # 

o

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

o

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

o

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

es.

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

Answer 8

Si può provare questo: $ ("# div1 # Edit1")