Currently, I am in the process of converting HTML to JSON.
Here is an example of the HTML I am working with:
<div class="treeprofit" id="divTreeViewIncomeDetails" style="height: auto;">
<li><span class="fa fa-folder-open highlight" id="3" onmouseover="visibleLink('3', 'Incomes', '0')" onmouseout="hideLink('3')"><span onclick="GetTreeViewChartOfAccountsByParam('3', 'Incomes')">Incomes </span><span class="closingbalance">INR 50.00Dr </span></span>
<ul>
<ul>
... (content continues)
</ul>
</ul>
</li>
</div>
CSS:
.treeprofit {
padding: 10px;
font-size: 16px;
border:1px solid #999;
}
.treeprofit li span :hover {
background-color: whitesmoke;
border: 0px;
color: black;
}
.treeprofit ul {
list-style-type: none;
padding-left:15px;
}
.treeprofit li { list-style-type: none;
}
.treeprofit li :hover {
cursor:pointer;
}
I am attempting to determine the distance between the li and the div.
I have tried the following code without success:
var items = [];
var inputData = $('#divTreeViewIncomeDetails').find('li > span');
for (var i = 0; i < inputData.length; i++) {
var position, data1, data2;
position = inputData[i].className;
data1 = inputData[i].children['0'].innerText.trim();
data2 = inputData[i].children['1'].innerText.trim();
var width = inputData[i].offsetLeft;
var item = { position: position, data1: data1, data2: data2, width:width }
items.push(item);
}
Although I am retrieving a value for width, it appears to be incorrect.
Please note: No modifications are to be made to the HTML structure itself.