Jquery - 获取列表位置答案

【问题标题】：Jquery - get list positionJquery - 获取列表位置
【发布时间】：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 完成吗？

提前致谢

【问题讨论】：

标签： jquery list

【解决方案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();

【讨论】：