Javascript 如何找到li和div之间的距离

实际上，我正在将HTML转换为JSON

我的html是这样的：

<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>
                    <li><span class="fa fa-file chartwidth" id="84" onmouseover="visibleLink('84', 'Sales A/c', '1')" onmouseout="hideLink('84')" onclick="ViewLedgerMsg(84)"><span onclick="GetTreeViewChartOfAccountsByParam('84', 'Sales A/c')">Sales A/c </span><span class="closingbalance">INR 50.00Dr </span></span></li>
                </ul>
                <ul>
                    <li><span class="fa fa-folder-open chartwidth" id="98" onmouseover="visibleLink('98', 'Indirect Income', '1')" onmouseout="hideLink('98')"><span onclick="GetTreeViewChartOfAccountsByParam('98', 'Indirect Income')">Indirect Income </span><span class="closingbalance">INR 0.00Cr </span></span>
                        <ul>
                            <ul>
                                <li><span class="fa fa-file chartwidth" id="99" onmouseover="visibleLink('99', 'Realized Exchange Gain', '2')" onmouseout="hideLink('99')" onclick="ViewLedgerMsg(99)"><span onclick="GetTreeViewChartOfAccountsByParam('99', 'Realized Exchange Gain')">Realized Exchange Gain </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                            </ul>
                            <ul>
                                <li><span class="fa fa-file chartwidth" id="122" onmouseover="visibleLink('122', 'Rounding off Gain A/c', '2')" onmouseout="hideLink('122')" onclick="ViewLedgerMsg(122)"><span onclick="GetTreeViewChartOfAccountsByParam('122', 'Rounding off Gain A/c')">Rounding off Gain A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                            </ul>
                            <ul>
                                <li><span class="fa fa-file chartwidth" id="124" onmouseover="visibleLink('124', 'Discount Received A/c', '2')" onmouseout="hideLink('124')" onclick="ViewLedgerMsg(124)"><span onclick="GetTreeViewChartOfAccountsByParam('124', 'Discount Received A/c')">Discount Received A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                            </ul>
                            <ul>
                                <li><span class="fa fa-file chartwidth" id="140" onmouseover="visibleLink('140', 'Stock Income', '2')" onmouseout="hideLink('140')" onclick="ViewLedgerMsg(140)"><span onclick="GetTreeViewChartOfAccountsByParam('140', 'Stock Income')">Stock Income </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                            </ul>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li><span class="fa fa-file chartwidth" id="134" onmouseover="visibleLink('134', 'Clearing And Forwarding Rcd', '1')" onmouseout="hideLink('134')" onclick="ViewLedgerMsg(134)"><span onclick="GetTreeViewChartOfAccountsByParam('134', 'Clearing And Forwarding Rcd')">Clearing And Forwarding Rcd </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                </ul>
                <ul>
                    <li><span class="fa fa-file chartwidth" id="135" onmouseover="visibleLink('135', 'Transport charges received ', '1')" onmouseout="hideLink('135')" onclick="ViewLedgerMsg(135)"><span onclick="GetTreeViewChartOfAccountsByParam('135', 'Transport charges received ')">Transport charges received  </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                </ul>
                <ul>
                    <li><span class="fa fa-file chartwidth" id="156" onmouseover="visibleLink('156', 'Sales Discount A/c', '1')" onmouseout="hideLink('156')" onclick="ViewLedgerMsg(156)"><span onclick="GetTreeViewChartOfAccountsByParam('156', 'Sales Discount A/c')">Sales Discount A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                </ul>
                <ul>
                    <li><span class="fa fa-file chartwidth" id="158" onmouseover="visibleLink('158', 'Stock Income A/c', '1')" onmouseout="hideLink('158')" onclick="ViewLedgerMsg(158)"><span onclick="GetTreeViewChartOfAccountsByParam('158', 'Stock Income A/c')">Stock Income A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                </ul>
                <ul>
                    <li><span class="fa fa-file chartwidth" id="163" onmouseover="visibleLink('163', 'Exchange Gain A/c', '1')" onmouseout="hideLink('163')" onclick="ViewLedgerMsg(163)"><span onclick="GetTreeViewChartOfAccountsByParam('163', 'Exchange Gain A/c')">Exchange Gain A/c </span><span class="closingbalance">INR 0.00Cr </span></span></li>
                </ul>
            </ul>
        </li>
        <li><span class="fa fa-arrow-down" style="width: 100%; color: red; font-weight: 700;"><span>Net Loss </span><span class="closingbalance">14,950.00Cr</span></span></li>
    </div>

我需要找到

li

和

div

我尝试了下面的代码，但没有使用它

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);
            }

var项目=[]；
var inputData=$（'#divTreeViewIncomeDetails'）。查找（'li>span'）；
对于（变量i=0；i

我得到了宽度值，但它不正确

---

注意：不应对HMTL进行任何更改

这将获得页面上所有LI元素的句柄。在其上循环，然后将其左偏移记录到控制台

$('li').each(function(){
  console.log($(this).prop('offsetLeft'))
})

---

将以下jquery放入

$（document）.ready（function（）{}）

jQuery

$("li").each(function(){
    alert($(this).text()+" is at a distance of "+$(this).offset().left+"px.");
});

---

这是一个。

填充或边距。选中

CTRL+SHIFT+I

元素。offsetLeft

应为每个元素返回一个坐标，该坐标以像素为单位显示其与元素父文档左侧的距离。然后可以比较两个不同图元的这些值，以找到它们之间的水平距离。对于

元素。offsetTop

$("li").each(function(){
    alert($(this).text()+" is at a distance of "+$(this).offset().left+"px.");
});