Prosty sposób na uzyskanie elementu według identyfikatora w znaczniku div?

Question

Proszę mi wybaczyć, jeśli powtórzę pytanie.

Mam HTML, że wszystkie elementy wewnątrz znacznika div ma inny identyfikator, przypuśćmy, że już mam odniesienia do div, czy istnieje jakiś prosty sposób na uzyskanie elementu przez jego id bez iteracji wszystkich elementów z tym div?

tutaj jest mój przykładowy html:

<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

Możesz spróbować czegoś takiego.

Oznaczenie próbek.

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

lepsza metoda jak sugeruje 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/

Nazwij to jak

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

Answer 2

Nie chcesz tego robić. Nieprawidłowy kod HTML ma więcej niż jeden element z tym samym id. Przeglądarki nie będą tak dobrze traktować, a będziesz mieć niezdefiniowane zachowanie, co oznacza, że ​​nie masz pojęcia, co przeglądarka da ci, gdy wybierzesz element według tego identyfikatora, może to być nieprzewidywalne.

Powinieneś używać klasy lub po prostu powtarzać dane wejściowe i śledzić indeks.

spróbować czegoś takiego:

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

Niestety to jest nieprawidłowy HTML. Identyfikator musi być unikatowy w całym pliku HTML.

Gdy korzystasz z Javascript's document.getElementById(), to zależy od przeglądarki, który element zwróci, w większości jest to pierwszy z danym identyfikatorem.

Nie będziesz mieć innej szansy, aby ponownie przypisać swoje identyfikatory, lub alternatywnie za pomocą atrybutu class.

Answer 4

Dany identyfikator można użyć tylko raz na stronie. Nieprawidłowy kod HTML ma wiele obiektów o tym samym identyfikatorze, nawet jeśli znajdują się w różnych częściach strony.

Można zmienić HTML do tego:

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

Następnie można uzyskać pierwszą pozycję w div1 z selektora CSS jak poniżej:

#div1 .edit1 

On w jQuery:

$("#div1 .edit1") 

Lub, jeśli chcesz powtórzyć elementy w jednym z twoich div, możesz to zrobić tak:

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

Gdybym nie mógł użyć ramy jak jQuery lub YUI, chciałbym tam dostać Sizzle i to, że za to logiki sterującej (jest to ten sam silnik wybierak jak jest wewnątrz jQuery), ponieważ manipulacje DOM jest masywnie łatwiej z dobrą biblioteką selektorów.

Gdybym nie mógł używać nawet Sizzle (co byłoby ogromnym spadkiem wydajności programistów), można użyć funkcji DOM do przechodzenia przez dzieci danego elementu.

Będziesz używał funkcji DOM, takich jak childNodes lub firstChild i nextSibling, a będziesz musiał sprawdzić nodeType, aby upewnić się, że masz tylko te elementy, które chciałeś. Nigdy nie piszę kodu w ten sposób, ponieważ jest on o wiele mniej wydajny niż przy użyciu biblioteki selektorów.

Answer 5

W HTML ids powinny być unikalne. Proponuję zmienić swój kod na coś takiego:

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

lub

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

lub

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

lub

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

np.

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

Answer 8

Można spróbować to: $ ("# div1 # Edit1")