Nhận chỉ mục của phần tử được nhấp bằng javascript tinh khiết

Tôi cần biết chỉ mục của phần tử được nhấp. Không thể tìm ra cách để làm điều đóNhận chỉ mục của phần tử được nhấp bằng javascript tinh khiết

for (i = 0; i < document.getElementById('my_div').children.length; i++) { 
    document.getElementById('my_div').children[i].onclick = function(){'ALERT POSITION OF CLICKED CHILD'}; 
}

this.index?

đây là một ví dụ về những gì tôi đang cố gắng để làm gì (nó chỉ cung cấp cho trở lại 6):

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body{margin:0;} 
#container div{height:50px;line-height:50px; text-align:center} 
</style> 
</head> 
<body> 
<div id="container"> 
<div>1</div> 
<div>2</div> 
<div>3</div> 
<div>4</div> 
<div>5</div> 
<div>6</div> 
</div> 
<script> 
for (i = 0; i < document.getElementById('container').children.length; i++) { 
    document.getElementById('container').children[i].onclick = function(){alert('Number ' + i + ' was clicked')}; 
} 
</script> 
</body> 
</html>

Nguồn

2012-01-10 Hakan

có thể trùng lặp của [Javascript đóng bên trong vòng - ví dụ đơn giản thực tế] (http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) –

Đây là một piece of code có thể giúp bạn có được những chỉ số của phần tử nhấp bên trong for vòng lặp. Tất cả bạn cần là một mới scope:

var g = document.getElementById('my_div'); 
for (var i = 0, len = g.children.length; i < len; i++) 
{ 

    (function(index){ 
     g.children[i].onclick = function(){ 
       alert(index) ; 
     }  
    })(i); 

}

Sửa 1: comments Kết hợp sử dụng Felix Kling của thành câu trả lời.

xử lý sự kiện đã là một đóng

Chỉnh sửa 2: Cập nhật liên kết fiddle

Nguồn

2012-01-10 10:54:41

THANKS Brutallus! Đó là những gì tôi muốn :) – Hakan

Chào mừng bạn :) Đi qua liên kết để biết thêm về đóng cửa. –

Nói đúng cách trình xử lý sự kiện đã ** là ** đóng. Những gì OP cần thiết là một phạm vi mới. –

Chỉ số trong mối quan hệ với những gì?

Nếu đó là về chỉ mục trong bộ sưu tập HTML hiện tại, chỉ mục sẽ được biểu thị bằng biến số truy cập i của bạn.

Một lời cảnh cáo: Vì HTMLCollections là "Trực tiếp", bạn nên sử dụng chúng để tìm ra số .length trong vòng lặp. Nếu nó xảy ra được rằng những yếu tố được thêm vào hoặc loại bỏ trong vòng lặp, những điều kỳ lạ và nguy hiểm có thể xảy ra. Lưu trữ giá trị .length trước khi gọi vòng lặp thay thế.

Nguồn

2012-01-10 10:31:27 jAndy

'i' sẽ không công việc: (anh ta sẽ cần bọc nó. – david

@david: thực sự. Hoàn toàn quên mất thực tế này :) – jAndy

Cảm ơn jAndy. Chỉ số liên quan đến các trẻ khác. Đã thêm ví dụ nếu bạn muốn xem – Hakan

Các thành phần ô bảng có thuộc tính cellIndex, nhưng tôi không biết về các yếu tố khác. Bạn có thể sẽ phải

tạo ra một đóng cửa để bảo lưu giá trị của i
động đếm previousSibling s
thêm một tài sản index trong cho vòng lặp của bạn và đọc đó (không làm tăng thêm đối tượng host) .

Cách tiếp cận đóng cửa sẽ là dễ nhất, tôi nghĩ vậy. Hãy chắc chắn rằng bạn đã hiểu cách đóng cửa hoạt động, có những giải thích tốt trên web.

function makeAlertNumber(element, i) { 
    element.addEventListener('click', function() { 
     alert('Number ' + i + ' was clicked'); 
    }, false); 
} 
[].slice.call(document.getElementById('container').children).forEach(makeAlertNumber); // homework: find a way to express this for older browsers :-)

Nguồn

2012-01-10 10:38:03 Bergi

THanks Bergi, bạn có muốn hiển thị ví dụ trong mã tôi đã thêm không? – Hakan

@Hakan: ví dụ đã thêm – Bergi

getIndexOfNode: function(node){ var i = 1; while(node.previousElementSibling != null){ i++ } return i; }
hàm sẽ trả về chỉ số của nút thông qua trong phần tử cha của nó.

Nguồn

2016-10-10 15:14:51

'nút' không bao giờ thay đổi, vì vậy đây là vòng lặp vô hạn. – Johnny5k

Với ES6 destructuring bạn có thể làm

const index = [...el.parentElement.children].indexOf(el)

hoặc

const index = Array.from(el.parentElement.children).indexOf(el)

hoặc phiên bản ES5

var index = Array.prototype.slice.call(el.parentElement.children).indexOf(el)

Nguồn

2017-09-20 17:38:12 MelkorNemesis

Điều này thật tuyệt vời !!! – fearis

-1

Nếu bạn đang tạo bố cục trang, và có quyền kiểm soát của bao nhiêu ' subdivs 'sẽ được bao bọc bởi' container ', tại sao không sử dụng javascript để tạo tất cả động?

for (var i = 0; i < NumberOfSubDivsYouNeed; i++) { 
var SubDiv = document.createElement("DIV"); 
    SubDiv.id = i; 
    SubDiv.style.*enter any style rules if you wish*; 
    SubDiv.onclick=function(){alert(this.id);}; 
    document.getElementById("container").appendChild(SubDiv); 
    }

Nguồn

2017-10-13 15:06:43 Wnog

Câu trả lời được chấp nhận (từ Ashwin Krishnamurthy) thực sự là tối ưu.

Bạn chỉ có thể làm:

const g = document.getElementById('my_div'); 
for (let i = 0, len = g.children.length; i < len; i++) 
{ 
    g.children[i].onclick = function(){ 
     alert(index) ; 
    } 
}

để tránh tạo ra đóng cửa không cần thiết. Và thậm chí sau đó nó không phải là tối ưu vì bạn đang tạo 6 trình xử lý sự kiện DOM (6 divs trong ví dụ trên) chỉ để có được một số nhấp chuột duy nhất div.

Những gì bạn cần thực sự làm là sử dụng một đoàn sự kiện (đính kèm đơn kiện nhấp chuột để công ty mẹ) và sau đó kiểm tra chỉ số 's e.target sử dụng phương pháp tôi đã đề cập trước đó trở lên (Get index of clicked element using pure javascript).

Nguồn

2018-02-08 07:54:05 MelkorNemesis

Không chắc chắn tại sao điều này có -1 vì nó là giải pháp tốt hơn so với bất kỳ đề cập ở đây;) – MelkorNemesis

Nhận chỉ mục của phần tử được nhấp bằng javascript tinh khiết

Trả lời

Các vấn đề liên quan