Javascript选择正确的元素

时间:2013-11-01 11:46:07

标签: jquery html dom

这是我的HTML:

<div id="TAB_CLIENTPANE" class="panel_tabs k-widget k-header k-tabstrip" style="height: 328px;" data-role="tabstrip" tabindex="0" role="tablist" aria-activedescendant="TAB_CLIENTPANE_ts_active">
    <ul class="k-tabstrip-items k-reset">
        <li class="k-item k-state-default k-tab-on-top k-state-active k-first" role="tab" aria-controls="TAB_CLIENTPANE-1" aria-selected="true">
            <span class="k-link">Summary Report</span>
            <a class="tab_win k-button"><span class="k-icon k-i-maximize"></span></a>
            <a class="tab_close k-button"><span class="k-icon k-i-close"></span></a>
        </li>
        <li class="k-item k-state-default k-last" role="tab" aria-controls="TAB_CLIENTPANE-2">
            <span class="k-link">Profit Report</span>
            <a class="tab_win k-button"><span class="k-icon k-i-maximize"></span></a>
            <a class="tab_close k-button"><span class="k-icon k-i-close"></span></a>
        </li>
    </ul>
    <div class="k-content k-state-active" style="display: block; height: 290px;" aria-expanded="true" role="tabpanel" id="TAB_CLIENTPANE-1">
        <div id="POSITIONREPORT" data-role="grid" class="k-grid k-widget k-secondary" style="height: 288px;">
            <!--lots of divs etc-->
        </div>
    </div>
    <div class="k-content" style="display: none; height: 290px;" aria-hidden="true" aria-expanded="false" role="tabpanel" id="TAB_CLIENTPANE-2">
        <div id="PROFITREPORT" data-role="grid" class="k-grid k-widget k-secondary" style="height: 288px;">
            <!--lots of divs etc-->
        </div>
    </div>
</div>

我想编写一个方法,其工作原理如下所述:

function get_li(id_of_div){
    // the parameter id_of_div will be the id of divs, 
    // eg: "POSTIONREPORT", "PROFITREPORT" etc.
    // let's say the parameter passed to the function is "PROFITREPORT"
    // PROFITREPORT is the second div after the ul element, so
    // the function has to return the second li element of the ul
}

如何选择正确的li?

提前致谢,

2 个答案:

答案 0 :(得分:1)

这将返回正确的li

function get_li(id_of_div){
    var index = $('#TAB_CLIENTPANE > div').index($('#' + id_of_div).parent());
    return $('#TAB_CLIENTPANE > ul > li').eq(index);
}

JSFiddle示例 - http://jsfiddle.net/zBkyJ/

答案 1 :(得分:0)

return $('li').eq($('.k-content').index($('#'+id_of_div).parent()));

那应该为你提供所需的元素