jquery 中对 ul 下的 li 的常用动态操作

最新推荐文章于 2024-07-24 13:52:34 发布

原创最新推荐文章于 2024-07-24 13:52:34 发布 · 3.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #ul

------【jQuery】专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍在 jQuery 中如何进行 ul 列表项的动态操作，包括添加、删除 li 元素以及获取 ul 下的所有 li。通过实例展示 jQuery 对 ul 子元素的高效管理。

场景：

<div class="form-group">
    <label class="col-sm-2 control-label">关联id：</label>
    <div class="col-sm-10">
        <ul id="relids">
        </ul>
    </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label"></label>
	<div class="col-sm-10">
                <!--将要新增的数据，li的值 -->
		<input type="text" class="form-control" id="schemeId" value="" style="display: none" required="required" 
                    onkeydown="schemeId_keyup_submit(event);" placeholder="请输入课程ID，按Enter键确定"/>
	</div>
</div>

1，动态增加 li

// 关联运动检测框回车事件
function schemeId_keyup_submit(e) {
	let schemeId = $("#schemeId").val();
	$("#relids").append("<li><span>"+schemeId+"</span>&nbsp;<i class='glyphicon glyphicon-remove' style='color: red' 
            onclick=removeRelsportId(this)></i></li>");
};

2，动态删除 li

// 移除关联运动id
function removeRelsportId(val) {
	// 根据 val 即 关联运动id
	val.parentElement.remove(); //parent() 返回当前元素集合的父元素
}

2，获取 ul 下所有 li

let relidsList= [];
$("#relids").each(function () {
	$(this).find('li').each(function() {
		relidsList.push($(this).text());
	});
});