How to find index value of div using javascript

Manideepgoud
Posted by Manideepgoud under JavaScript category on | Points: 40 | Views : 274
Hi,
In this below code, we will find the index value of div, in which row and column.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<style>
.checking{border: 1px solid black;}
</style>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>

</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name()">
<h3>Column 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 7</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 8</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
<div class="col-sm-4">
<div class="checking" onclick="fun_name(this)">
<h3>Column 9</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</div>
</body>
<script>
var naming = fun_name(function(e){
console.log(e);
});
var checkingData = document.getElementsByClassName('checking');
var containerData = document.getElementsByClassName('container');

for (var i = 0; i < checkingData.length; i++) { // for each row

(function(index) {

checkingData[i].onclick = function(e){
for(var j=0;j<containerData.length;j++){
if(containerData[j] == e.target.closest('.container')){

var checkCheckingIndex = containerData[j].getElementsByClassName('checking');
for(var k=0;k<checkCheckingIndex.length;k++){
if(checkCheckingIndex[k] == e.target.closest('.checking')){
alert(j + " " + k);
}
}
}
}
}
})(i);
}
</script>
</html>

From the above code, we can see which row and column had the user clicked
This might help you.

Thanks

Comments or Responses

Login to post response