使用jQuery获取嵌套列表项的索引

时间:2013-01-30 00:01:08

标签: jquery css

尝试获取包含在活动部分中选择的类的锚标记的列表项的索引号

LI我想检索:

<li>
            <a href="#" data-id="3" class="scene unchecked selected">The Health Care Delivery System</a>
        </li>

在这个例子中,我应该得到1

的索引
<ul>
<li>
    <a href="#" class="scene expanded checked">Introduction</a>
</li>
<li class="active-section">
    <a class="expanded">The Section 2</a>
    <ul style="display: block;">
        <li>
            <a href="#" data-id="2" class="scene checked">Introduction</a>
        </li>
        <li>
            <a href="#" data-id="3" class="scene unchecked selected">The Health Care Delivery System</a>
        </li>
        <li>
            <a href="#" data-id="4" class="scene unchecked">Determining Payments from External Customers</a>
        </li>
        <li>
            <a href="#" data-id="5" class="scene unchecked">Checkpoint</a>
        </li>
    </ul>
</li>
<li>
    <a class="collapsed">Paying for Health Care</a>
    <ul class="collapsed" style="">
        <li>
            <a href="#" data-id="6" class="scene unchecked">Health Care Systems</a>
        </li>
        <li>
            <a href="#" data-id="7" class="scene unchecked">Find Savings with a Discount</a>
        </li>
        <li>
            <a href="#" data-id="8" class="scene unchecked">Checkpoint</a>
        </li>
        <li>
            <a href="#" data-id="9" class="scene unchecked">Defects in Ice Skate Pairs</a>
        </li>
    </ul>
</li>
<li>
    <a href="#" data-id="22" class="collapsed scene unchecked">Summary</a>
</li>
</ul>

这是我尝试过的,但它不起作用

var innerIndex = $("li.active-section").index("li:has(a.selected)");

3 个答案:

答案 0 :(得分:0)

$(".active-section li:has(a.selected)").index();

您需要获取正确的li元素的索引。

http://jsfiddle.net/ExplosionPIlls/PKEBv/

答案 1 :(得分:0)

另一种方法

var innerIndex = $("li.active-section li > a.selected").parent().index();

jsFiddle

答案 2 :(得分:0)

我认为您可能希望使用定位列表中链接元素的class selector?

var selectedElement = $(".scene").class("selected");

虽然不是一个完整的代码答案(我的头顶答案......甚至不确定它是否正常工作),但它应该以更简单的方式获得相同的结果。你只需要确保只有一个类具有'selected'属性,但这是非常明显和预期的。

快乐的编码!