Question

    <ul class="uSPStyle" id="uSPStyle">
    <li> <!-- 1st entry -->
        <a class="tfLink clickMe current" title="Healthy Measures" data-toggle=".tfLink4" href="javascript:void(0);"><img src="theImages/imgMinus.png" id="imgFirstM" class="imgExpCol">Healthy Measures</a>
        <ul class="uSPStyle uSPInner" style="width: 80%; display: block;">
            <li><a class="tfLink clickMe current" title="What We Do" data-toggle=".tf1SLink4" href="javascript:void(0);">What We Do</a></li>
            <li><a class="tfLink clickMe" title="Our Team" data-toggle=".tf2SLink4" href="javascript:void(0);">Our Team</a></li>
            <li><a class="tfLink clickMe" title="Contact Us" data-toggle=".tf3SLink4" href="javascript:void(0);">Contact Us</a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf4SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf5SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf6SLink4" href="javascript:void(0);"></a></li>
        </ul>
    </li>
    <li> <!-- 2nd entry -->
        <a class="tfLink clickMe current" title="Healthy Measures" data-toggle=".tfLink4" href="javascript:void(0);"><img src="theImages/imgMinus.png" id="imgFirstM" class="imgExpCol">Healthy Measures</a>
        <ul class="uSPStyle uSPInner" style="width: 80%; display: block;">
            <li><a class="tfLink clickMe current" title="What We Do" data-toggle=".tf1SLink4" href="javascript:void(0);">What We Do</a></li>
            <li><a class="tfLink clickMe" title="Our Team" data-toggle=".tf2SLink4" href="javascript:void(0);">Our Team</a></li>
            <li><a class="tfLink clickMe" title="Contact Us" data-toggle=".tf3SLink4" href="javascript:void(0);">Contact Us</a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf4SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf5SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf6SLink4" href="javascript:void(0);"></a></li>
        </ul>
    </li>
    <li> <!-- 3rd entry -->
        <a class="tfLink clickMe current" title="Healthy Measures" data-toggle=".tfLink4" href="javascript:void(0);"><img src="theImages/imgMinus.png" id="imgFirstM" class="imgExpCol">Healthy Measures</a>
        <ul class="uSPStyle uSPInner" style="width: 80%; display: block;">
            <li><a class="tfLink clickMe current" title="What We Do" data-toggle=".tf1SLink4" href="javascript:void(0);">What We Do</a></li>
            <li><a class="tfLink clickMe" title="Our Team" data-toggle=".tf2SLink4" href="javascript:void(0);">Our Team</a></li>
            <li><a class="tfLink clickMe" title="Contact Us" data-toggle=".tf3SLink4" href="javascript:void(0);">Contact Us</a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf4SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf5SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf6SLink4" href="javascript:void(0);"></a></li>
        </ul>
    </li>
    <li> <!-- 4th entry -->
        <a class="tfLink clickMe current" title="Healthy Measures" data-toggle=".tfLink4" href="javascript:void(0);"><img src="theImages/imgMinus.png" id="imgFirstM" class="imgExpCol">Healthy Measures</a>
        <ul class="uSPStyle uSPInner" style="width: 80%; display: block;">
            <li><a class="tfLink clickMe current" title="What We Do" data-toggle=".tf1SLink4" href="javascript:void(0);">What We Do</a></li>
            <li><a class="tfLink clickMe" title="Our Team" data-toggle=".tf2SLink4" href="javascript:void(0);">Our Team</a></li>
            <li><a class="tfLink clickMe" title="Contact Us" data-toggle=".tf3SLink4" href="javascript:void(0);">Contact Us</a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf4SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf5SLink4" href="javascript:void(0);"></a></li>
            <li style="display: none;"><a class="tfLink clickMe" title="" data-toggle=".tf6SLink4" href="javascript:void(0);"></a></li>
        </ul>
    </li>
</ul>

我想知道父LI内部UL的大小。

我使用以下代码：

var vFirst = "3";
vULSubSize = $("#uSPStyle li:not(li li):eq(" + vFirst + ")").find("a").closest("li").children("ul").length; //{DONE}get the size of the sub UL inside the above LI
alert(vULSubSize); // keep displaying 1 [2 items] and not 2 [3 items]

我该如何解决这个问题？

Answer 1

如果您想根据第四个li子元素获取li后代的数量，那么您可以使用直接子组合>来选择直接子项{ {1}}元素：

li

Answer 2

$('#uSPStyle li').eq(vFirst).find('li').length;

<强> Demo

这将获得顶级列表项中列表项的长度，其中包含来自URL参数的索引。我更喜欢eq()方法来实现更简单的语法。

Answer 3

var vFirst = "3";
console.log( $('#uSPStyle > li:eq(' + vFirst + ') ul li').length )

<强> jsFiddle example

如何获得子UL长度

3 个答案: