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