gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 08:29:02 26 4
gpt4 key购买 nike

我需要你的帮助,

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

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com