如何从ul列表访问子节点?

时间:2017-08-15 01:59:26

标签: javascript jquery

我对jquery dom有疑问。

假设我有这个jsp代码。

<c:forEach var="result" items="${resultList }" varStatus="status">

    <ul class="shList" id="shList">
        <li class="fl">
            <ul class="top">
                <li>${ result.appSn}</li>
                <li>${result.mkType }</li>
                <li>${result.clasType }</li>
                <li>${result.appUseGrade }</li>
            </ul>
            <div class="bottom">
                <p class="fl">- ${result.appNm}</p>
                <span class="fr">${result.inputDt}</span>
            </div>

            <div class="sliding">
                paragraph


            </div>
        </li>
        <li class="fr"><img src="${result.appLeaderImg}" alt="" width="60" height="60" /></li>
    </ul>

</c:forEach>

我想点击特定的UL时切换滑动。 我想访问div class =“sliding”

这是我的jquery。

$(document).ready(function(){
    $("#shList li").click(function(){
        console.log("chList Clicked");
        console.log($(this).children().eq(1));
        console.log($(this).children().eq(2));
        console.log($(this).next());
        console.log($(this).next().next());
        $(".sliding p").toggle();
    });
});

我不确定如何访问段落滑动。

1 个答案:

答案 0 :(得分:0)

使用$(this).find()搜索被点击的li内的选择器。

$(document).ready(function(){
    $("#shList li").click(function(){
        console.log("chList Clicked");
        console.log($(this).children().eq(1));
        console.log($(this).children().eq(2));
        console.log($(this).next());
        console.log($(this).next().next());
        $(this).find(".sliding p").toggle();
    });
});

您可能还应该使原始选择器更具体:$("#shlist li.fl")。否则,它将用于.fr元素和<li>内的ul.top