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

Question

I need your help,

Similar to what the code does below for multi-select boxes that are selected, how can I create a new function that would iterate through my custom UL LI A list and isolating only items that have the "selected" classname attributed to them:

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++         
    }
}

Here is the HTML, CSS and 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>

Answer 1

Can you just use jQuery to select them and check the length? eg

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

Or you can iterate through it in the normal jQuery way

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

Question

1 answers

solution1
1 ACCPTED 2015-10-29 16:25:18

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

Question

1 answers

solution1 1 ACCPTED 2015-10-29 16:25:18

solution1
1 ACCPTED 2015-10-29 16:25:18