Question

我有这个HTML结构：

<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>

我正在尝试查找second anchor内联left值，并尝试使用此jQuery代码，但每次我从控制台获取undefined时。

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

JSFiddle：Sample Demo

有什么想法吗？

Answer 1

eq()按索引访问元素，该索引从零开始。因此，要获得第二个元素，您需要:eq(1)。

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

Updated fiddle

Answer 2

另一种方法是使用nth-of-type()匹配每个子节点的索引，从1开始，与.eq()索引相比，它从基于零数组的选择器开始

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

Fiddle

Answer 3

你可以用 eq()以零索引开头，我们的锚标记位于div的第二个位置，所以我们eq(1)

如果我们使用#sqm-id a，则表示该ID #sqm内的所有锚标记无需使用.find()

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

如何在锚的第二个元素上获取CSS剩余属性值

3 个答案: