javascript - 迭代自定义 UL LI A 列表并仅隔离具有所选类名的项目-6ren

javascript - 迭代自定义 UL LI A 列表并仅隔离具有所选类名的项目

转载作者：行者123 更新时间：2023-12-03 08:29:02

我需要你的帮助，

类似于下面的代码对选定的多选框所做的操作，如何创建一个新函数来迭代我的自定义 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 方式迭代它

关于javascript - 迭代自定义 UL LI A 列表并仅隔离具有所选类名的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33419551/

文章推荐： javascript - 选择 Yes No 确认 ASP.NET 中的弹出窗口

文章推荐： python - 出错时退出多处理程序

文章推荐： javascript - 在向前迭代之前等待调用函数完成

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 迭代自定义 UL LI A 列表并仅隔离具有所选类名的项目