如何获得锚的第二个元素上的CSS左属性值

Question

I have this HTML Structure:

<div id="sqm-id" class="ui-state-disabled ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all ui-slider-disabled ui-disabled">
    <div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 0%;"></a>
    <a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"></a>
</div>

And I am trying to find second anchor inline left value and I have tried with this jQuery code but everytime I am getting undefined from console.

console.log($("#sqm-id").find("a:eq(2)").css("left"));

JSFiddle: Sample Demo

Any ideas?

Answer 1

eq() accesses elements by their index, which is zero-based. Therefore to get the second element you need :eq(1) .

console.log($("#sqm-id").find("a:eq(1)").css("left"));

Updated fiddle

Answer 2

Another way use nth-of-type() the index of each child to match, starting with 1 compared to .eq() index it starts from zero array based selector

console.log($("#sqm-id").find("a:nth-of-type(2)").css("left"));

Fiddle

Answer 3

you can use eq() start with zero index and our anchor tag at second position on div so we us eq(1)

And if we use #sqm-id a it means all anchor tag inside that id #sqm no need to use .find()

console.log($('#sqm-id a').eq(1).css("left"));