Jquery - 获取列表位置

Posted 2023-04-14

【中文标题】Jquery - 获取列表位置

【英文标题】：Jquery - get list position

【发布时间】：2011-09-11 14:53:17

【问题描述】：

我有以下代码

<ul class="MenuMainContent">
        <li class="tabClass clubTab" style="display: none;"><a href="#tabs-1" class=" ">Club</a></li>
        <li class="tabClass eatTab active" style="display: list-item;"><a href="#tabs-2" class="  selected">Eat</a></li>
        <li class="tabClass barTab" style="display: none;"><a href="#tabs-3" class=" ">Drink</a></li>
    </ul>

我想使用 jquery 来获取第一个可见列表项的位置（即不显示样式的位置：无）

这可以用 jquery 完成吗？

提前致谢

【参考方案1】：

使用您提供的代码，您可以获得第一个可见列表项的索引（相对于ul 元素，使用以下jQuery：

$(".tabClass:visible").index()

有关使用您的代码的示例，请参阅 this fiddle（它应该提醒“1”，因为第一个可见列表项位于位置 1（索引从 0 开始）。

【参考方案2】：

这不是必需的，但我会删除内联样式 - 添加隐藏样式：

 <ul class="MenuMainContent">
    <li class="tabClass clubTab hidden"><a href="#tabs-1" class=" ">Club</a></li>
    <li class="tabClass eatTab active"><a href="#tabs-2" class="  selected">Eat</a></li>
    <li class="tabClass barTab hidden"><a href="#tabs-3" class=" ">Drink</a></li>
</ul>

在 CSS 中：

 .hidden display:none;

在 jQuery 中

 $('.tabClass.active:first').etc...

（请注意，我假设“活动”类仅适用于未隐藏的行）

一旦您参考了相关项目，请参阅这篇文章： jQuery x y document coordinates of DOM object 了解如何获取它的位置。

【参考方案3】：

当然可以，您可以使用 jQuery 轻松做到这一点。

您将使用.Position() 方法获取对象的坐标。

查看此页面了解更多详情：http://api.jquery.com/position/

如果你做不到，请告诉我，我可以将所需的代码发布给你，谢谢。

【参考方案4】：

我认为这是你想要的

  $("ul.MenuMainContent li:visible")

这里的工作示例http://jsfiddle.net/VXjvS/

你也可以像这样先加进去

$("ul.MenuMainContent li:visible:first").position() to get the position

【参考方案5】：

使用此代码获取第一个可见列表..

$("ul.MenuMainContent li:visible:first").position();