Question

代码：http://jsfiddle.net/JhcYu/

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />    
    <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">

         $(function() {

            $("#tabs, #tabs2").tabs();

            $('#tabs').tabs('select', 0);

            $('#alt2 li').click(function(e) {

                if($(this).find('>ul').is(':visible'))
                     $(this).find('>span').html('+');
                else
                     $(this).find('>span').html('-');        


                $(this).find('>ul').stop(true, true).slideToggle(150, "swing")
            /*    .end().siblings().find('ul').slideUp().closest('li')    */
                .find('>span').html('+');


                $('#alt2 li').each(function(){
                    $(this).css({ 'font-weight' : 'normal'  });
                });

                $(this).css({ 'font-weight' : 'bold' }).children().css({ 'font-weight' : 'normal' });

                e.stopPropagation();
            });

            $('#alt2 li').each(function(i, val){

                var children = $(val).find('ul li');

                if(children.size() > 0)
                    $(val).prepend('<span>+</span>');


            });

            function selectListitemByText(listitemText) {

                $('#alt2 li').each(function(i, val){

                    var currentListitemText = $(this).clone().children().remove().end().text().trim();

                    if(currentListitemText == listitemText) {

                        //$(val)...
                        return false;
                    }
                });
            }





        });

    </script>

    <style type="text/css">


        body { font: 12px Verdana; }

        .ui-tabs-nav { background: transparent; border-width: 0px 0px 1px 0px;  }
        .ui-tabs .ui-tabs-nav { padding: 0.2em 0 0; }
        .ui-widget-content { border: 0; }
        .ui-tabs .ui-tabs-panel { border: 1px solid #aaa; border-width: 1px; border-top: 0;}
        .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-radius: 0; }

        #tabs-2 { padding: 0; }

        #alt2 { width: 500px; margin: 0 auto; }
        #alt2 ul { list-style: none; }
        #alt2 ul ul { display: none; }
        #alt2 li { cursor: pointer; margin: 5px; }

    </style>
</head>
<body>


<div id="alt2">

    <ul>
        <li>
            System Audit
            <ul>
                <li >Site and Contacts</li>
                <li>Current Licenses</li>
            </ul>
        </li>
        <li>
            Expected Result
            <ul>
                <li>
                    Control System Information
                    <ul>
                        <li>ABB Contacts</li>
                        <li>Channel Partner Contact</li>
                    </ul>
                </li>

                <li>Machine ID's</li>
                <li>Current Licenses</li>
            </ul>
        </li>
        <li>
            Quotation
            <ul>
                <li>Lorem</li>
                <li>Ipsum</li>
                <li>Result</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

我想要一个函数“selectListitemByText”，它可以选择任何深度的listitem。功能应该保持不变（+转入 - 当花费时，字体+重量：粗体等）。我开始写这个功能，但我不确定如何选择正确的父母和孩子。

由于

Answer 1

那么，您想要选择包含给定文本的项目吗？你走了。

 selectListitemByText(text) {
     $('#alt2').find('li:contains('+text+')');
 }

Answer 2

我编写了一个功能非常好的函数，但我必须为你的代码添加一些东西。

请参阅此小提琴中的评论：

http://jsfiddle.net/59tKg/5/

jquery菜单;使用功能选择特定项目

2 个答案: