Cách đơn giản để lấy phần tử theo id trong thẻ div?

Question

Hãy tha thứ cho tôi nếu tôi lặp lại câu hỏi.

Tôi có HTML rằng tất cả các phần tử bên trong thẻ div có id khác nhau, giả sử tôi đã có tham chiếu đến div, có cách nào đơn giản để lấy phần tử theo id của nó mà không lặp lại tất cả các phần tử với div đó không?

đây là html mẫu của tôi:

<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

Bạn có thể thử một cái gì đó như thế này.

Đánh dấu mẫu.

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

Một phương pháp tốt hơn theo đề nghị của 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/

Gọi nó như

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

Answer 2

Bạn không muốn làm điều này. Đây là HTML không hợp lệ để có nhiều phần tử với cùng một số id. Trình duyệt sẽ không xử lý tốt, và bạn sẽ có hành vi không xác định, nghĩa là bạn không biết trình duyệt sẽ cung cấp cho bạn gì khi bạn chọn một phần tử theo id đó, nó có thể không thể đoán trước được.

Bạn nên sử dụng một lớp học hoặc chỉ lặp lại thông qua các yếu tố đầu vào và theo dõi chỉ mục.

Hãy thử một cái gì đó như thế này:

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

Thật không may đây là HTML không hợp lệ. ID phải là duy nhất trong toàn bộ tệp HTML.

Khi bạn sử dụng Javascript của document.getElementById(), nó phụ thuộc vào trình duyệt, phần tử nào sẽ trở lại, phần lớn là phần tử đầu tiên có ID nhất định.

Bạn sẽ không còn cơ hội nào khác để gán lại ID của mình hoặc sử dụng thuộc tính class.

Answer 4

ID đã cho chỉ có thể được sử dụng một lần trong một trang. HTML không hợp lệ để có nhiều đối tượng có cùng ID, ngay cả khi chúng nằm trong các phần khác nhau của trang.

Bạn có thể thay đổi HTML của bạn như thế này:

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

Sau đó, bạn có thể nhận được các mục đầu tiên trong div1 với một chọn CSS như thế này:

#div1 .edit1 

On trong jQuery:

$("#div1 .edit1") 

Hoặc, nếu bạn muốn lặp lại các mục trong một trong các div của mình, bạn có thể làm như sau:

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

Nếu tôi không thể sử dụng khung như jQuery hoặc YUI, tôi sẽ lấy Sizzle và bao gồm nó cho logic chọn của nó (nó là cùng một công cụ chọn như bên trong jQuery). dễ dàng hơn với thư viện bộ chọn tốt.

Nếu tôi không thể sử dụng ngay cả Sizzle (có thể giảm đáng kể năng suất của nhà phát triển), bạn có thể sử dụng các hàm DOM đơn giản để di chuyển con của một phần tử đã cho.

Bạn sẽ sử dụng các hàm DOM như childNodes hoặc firstChild và nextSibling và bạn phải kiểm tra nodeType để đảm bảo bạn chỉ có loại phần tử bạn muốn. Tôi không bao giờ viết mã theo cách đó vì nó kém hiệu quả hơn nhiều so với sử dụng thư viện bộ chọn.

Answer 5

Trong id HTML phải là duy nhất. Tôi đề nghị bạn thay đổi mã của bạn thành một cái gì đó như thế này:

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

hoặc

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

hoặc

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

hoặc

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

ví dụ:

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

Answer 8

Bạn có thể thử này: $ ("# div1 # edit1")