Javascript jQuery根据父项宽度获取元素的位置。职位（

在下面的提琴中，您可以看到我试图基于父元素获取子元素的左侧位置，以便在那里放置标记。但是，

$this.position（）.left的所有结果总是超出其应有的范围

如何修改小提琴使
.line
移动到悬停的元素


html
将最后一行切换到px<代码>$line.css（'margin-left'，place+'px'）当是。我以为是更严重的事情
<ul class="inline pricing-list">
    <div class="line">|</div>
    <li>
        <a data-index="1">
            <div class="qty">48</div>         
            <div class="price">$15</div>
        </a>
    </li>

    <li>
        <a data-index="2">
            <div class="qty">60</div>      
            <div class="price">$13</div>
        </a>
    </li>

    <li>
        <a data-index="3">
            <div class="qty">120</div>
            <div class="price">$11.5</div>
        </a>
    </li>
</ul>

const $trigger = $('[data-index]');
const $line = $('.line');
$trigger.hover( function() {
    const place = $(this).position().left;
    $line.css('margin-left',place+'%');
});