循环访问自定义 UL LI A 列表，并仅隔离具有所选类名的项

Iterating through a custom UL LI A list and isolating only items that have the selected classname attributed to them

本文关键字：隔离 UL 自定义 访问 LI 列表 循环      更新时间：2023-09-26

我需要你的帮助，

类似于下面的代码对选定的多选框所做的，我如何创建一个新函数来循环访问我的自定义 UL LI A 列表并仅隔离具有"选定"类名的项目：

var sel = document.getElementById('selectbox');        
c = 1
for (var i=0, len=sel.options.length; i<len; i++) {    
    if (sel.options[i].selected) {              
        alert(sel.options[i].value)
        c++         
    }
}

以下是HTML，CSS和Javascript：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.75em; color:#000;}
        .dropdown dd, .dropdown dt, .dropdown ul {
            margin:0px;
            padding:0px;
        }
        .dropdown dd {
            position:relative;
        }
        .dropdown a, .dropdown a:visited { color:#816c5b; text-decoration:none; outline:none;}
        .dropdown a:hover { color:#000;}
        .dropdown dt a:hover, .dropdown dt a:focus {
            border: 1px solid rgb(128,128,128);
        }
        .dropdown dt a {
            background:#e4dfcb url(arrow.png) no-repeat scroll right center;
            display:block;
            padding-right:20px;
            border:1px solid rgb(170,170,170);
            width:150px;
        }
        .dropdown dt a span {
            cursor:pointer;
            display:block;
            padding:5px;
        }
        .dropdown dd ul {
           background:#e4dfcb none repeat scroll 0 0;
           border:1px solid rgb(170,170,170);
           display:none;
           left:0px;
           padding:5px 0px;
           position:absolute;
           top:2px;
           width:auto;
           min-width:170px;
           list-style:none;
       }
        .dropdown span.value { display:none;}
        .dropdown dd ul li a { padding:5px; display:block;}
        .dropdown dd ul li a:hover { background-color:#d0c9af;}
        .dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
        .selected{
            background-color:#d0c9af;
        }
    </style>
    <script type="text/javascript">
    /*
                    $(".dropdown dt a span").html(text);
                $(".dropdown dd ul").hide();
                $("#result").html("Selected value is: " + getSelectedValue("sample"));
*/
        $(document).ready(function() {
            $(".dropdown dt a").click(function() {
                $(".dropdown dd ul").toggle();
            });
            $(".dropdown dd ul li a").click(function(e) {
                var text = $(this).html();
                if (e.ctrlKey) {
                    $(this).addClass('selected');
                }
                else {
                    var text = $(this).html();
                    $(".dropdown dd ul li a").removeClass('selected');
                    $(this).addClass('selected');
                    $(".dropdown dt a span").html(text);
                    $(".dropdown dd ul").hide();
                }

            });
            function getSelectedValue(id) {
                return $("#" + id).find("dt a span.value").html();
            }
            $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.parents().hasClass("dropdown"))
                    $(".dropdown dd ul").hide();
            });

        });
    </script>
</head>
<body>
    <dl id="sample" class="dropdown">
        <dt><a href="#"><span>Please select the country</span></a></dt>
        <dd>
            <ul>
                <li><a href="#">Brazil<span class="value">BR</span></a></li>
                <li><a href="#">France<span class="value">FR</span></a></li>
                <li><a href="#">Germany<span class="value">DE</span></a></li>
                <li><a href="#">India<span class="value">IN</span></a></li>
                <li><a href="#">Japan<span class="value">JP</span></a></li>
                <li><a href="#">Serbia<span class="value">CS</span></a></li>
                <li><a href="#">United Kingdom<span class="value">UK</span></a></li>
                <li><a href="#">United States<span class="value">US</span></a></li>
            </ul>
        </dd>
    </dl>
    <span id="result"></span>
</body>
</html>

你能用jQuery来选择它们并检查长度吗？例如

var c = $(".dropdown dd ul li a.selected").length

或者你可以用普通的jQuery方式遍历它

相关文章：