ul中获取当前点击的li的值

最新推荐文章于 2021-08-16 18:55:21 发布
最新推荐文章于 2021-08-16 18:55:21 发布
阅读量4.1k 收藏 7
点赞数 2
文章标签： ul 选中的li的值 当前点击的li jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han_xiaoxue/article/details/77262910
版权
这篇博客介绍如何在HTML中通过JS实现当点击ul列表时获取当前选中li的值。当li被点击时，添加active类并移除其他li的active类，同时将li的值保存到隐藏input字段，以便后续业务处理。
摘要由CSDN通过智能技术生成

html代码：

<div class="chooseBar">

        <ul class="chooseUl">
            <li id="a1" class="chooseBtn active">最新课程</li>
            <li id="a2" class="chooseBtn">Java基础</li>
            <li id="a3" class="chooseBtn">数据库基础</li>

        </ul>

<input id="courseType" type="hidden">

    </div>


JS代码：

<script rel="script">

$(".chooseUl").children("li").click(function(e){
        var chooseId = e.currentTarget.id;
        $(this).addClass("active").siblings("li").removeClass(

最低0.47元/天 解锁文章
wei_aiwan
关注
事件委托ul返回li的索引
qq_46545062的博客
08-22 619
事件委托ul确定li的索引
jquery 如何获取ul中li的值
信徒博客
04-04 1万+
html页面代码如下 <span></span>显示选中的li的值 <span id="tresult"></span> <ul style="list-style:none;" id="uli"> <li>五谷杂粮</li> <li>水产类</li> <li...
jquery获取ul中li的值
热门推荐
yy211zhu的博客
05-09 3万+
通过点击li标签，把值赋给一个文本框 以下是HTML 您所选取的值为： 选项1 选项2 选项3 选项4 选项5 JS代码 $(document).
javascript获取当前<ul>中点击的<li> 的值 来解决MUI多规格切换
continue my dream 技术只是工具，关键在于思想
08-03 2159
var ul = document.getElementById('parent'); var lis = ul.getElementsByTagName('li'); for(var i=0;i&lt;lis.length;i++){ lis[i].onclick = function(){ alert(this.innerHTML); } }   mui.plusReady(fun...
jQuery获取所点击ul中li的文本值
打酱油的程序员
11-28 1万+
最近做项目中要用到获取所点击ul中li的文本值，我整理了下jQuery的实现方式，当然javascript中跟其思路一样。 <div class="con"> <span>今天是：</span><span><input type="text" id="tresult" /></span> ...
获取ul下所有li
绝凌峰
08-07 7350
获取UL下所有li方法： var ul = document.getElementByIdx_x_x_x_x("brandLiId");   var lis = ul.getElementsByTagName_r("li"); for(var i = 0; i < lis.length;i++){     lis[i].onclick=function(){     //这里如何获得，此
使用vue点击li,获取当前点击li父辈元素的属性值方法
10-18
在这个示例中，我们看到如何在用户点击`li`元素时，获取该`li`的父级`ul`元素的`name`属性值。以下是关键知识点的详细解释： 1. **事件监听器**：Vue.js 提供了 `v-on` 指令来绑定事件监听器。在这个例子中，我们用...
jQuery在ul中显示某个li索引号的方法
10-24
通过获取这个对象的长度，我们就可以得到当前点击的li元素在同辈元素中的索引位置。这个索引位置是从0开始计算的，如果希望显示的索引从1开始（更加符合人类的常规认知），则需要对得到的值加1。 例如，有以下代码...
点击ul列表中每个li，打印当前索引值
Haines
06-23 604
1.html的基本结构: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> 2.js实现部分： 1.使用立即执行函数 var liList = document.getElementsByTagName('li') for (var i = 0; i < liList.
Jquery和JS获取ul中li标签的值以及赋值问题
09-15 2万+
通过点击li标签，拿到li值，在把值赋给一个文本框 以下是HTML，以及input标签<input type="hidden" id="orderBy" value="${orderBy}" > <input type="hidden" id="orderColumn " value="${orderColumn }" > <ul class="orderType" > <li va
vue.js click点击事件获取当前元素对象
weixin_30662539的博客
01-22 816
Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul&gt...
Jquery或者JS获取ul中li标签
weixin_44124432的博客
11-14 1688
html 代码： <div id="divdiv" class="datagrid-m-slider-body innerbox"> <ul id="datagrid-m-ul" class="datagrid-m-ul"> <li title="信息管理" class="datagrid-m-text"> <a h...
Vue中点击ul获取具体是点击的哪一个li
qq_43114230的博客
08-16 7768
需求描述 项目是基于Vue的，想要实现的功能是： 1、点击ul就知道具体是哪一个li在点击 2、不给li绑定点击事件，只给ul绑定点击事件，因为li很多，一个个给li绑定事件比较麻烦 3、通过知道是点击的哪一个li，进而进行跳转 项目特殊 这个项目中，li标签下面还嵌套了两个标签，分别是img标签和span标签。后面会说到li嵌套和不嵌套对解决这个问题的影响。 <li> <img src="..." alt="" /> <span>message</span&g
多个 (li) 标签如何获取获取选中的里面的某个特定值??
weixin_30527551的博客
03-11 1070
两种方式: 1/.根据div中的class属性 指定ul 找到选中的单个li $(".f_dingdan ul li").click(function(){ var a=$(this).find("input").val() /使用this获取input的值 alert(a);}) 2/.根据ul标签里面设置的id获取总的li标签,通过for循环获取单个li里面的特定值...
vue 点击ul里面的li,找到被点击的li,打印出被点击li里的内容并改变样式
dell_Luo的博客
09-17 1081
vue 点击ul里面的li,找到被点击的li,打印出被点击li里的内容并改变样式 直接贴上我的代码: html里的代码 点击事件我这里是给被点击的li 给改变了背景颜色以及字体颜色
js 获取ul地址栏的参数的值
凌风的博客
02-18 637
定义： $.getUrlParam = function (name) { var reg = new RegExp(&quot;(^|&amp;amp;)&quot; + name + &quot;=([^&amp;amp;]*)(&amp;amp;|$)&quot;); var r = window.location.search.substr(1).match(reg); if (r !=
javascript获取li列表中有active标签的序列号
清淡描写的博客
12-06 1万+
javascript获取li列表中有active标签的序列号 Author:[前进的大牛] 代码块代码块语法遵循标准markdown代码，例如： **需要引入jquery文件** ------------HTML代码: <ul> <li>1</li> <li c
JS获取ul中li的值同步到搜索框
Harvey Wang的博客
03-20 979
　　最近在做项目的过程中，需要做一个模糊查询。模糊查询结果列表展示在ul的无序列表中，当点击其中一个li时需要将列表中值绑定到搜索框中，并且查询。 　　在网上也参考了一些人写的博客使用jQuery的on方法绑定click事件，我自己尝试了一下不好用。我自己参考公司同事的做法，使用jQuery的live方法绑定事件。具体代码如下： $("#project ul li").live("clic...
使用jquery获取ul中当前正在点击的li的索引
最新发布
06-03
可以使用以下代码获取当前正在点击的 `li` 元素在其父级 `ul` 元素中的索引： ```javascript $('ul').on('click', 'li', function() { var index = $(this).index(); console.log(index); }); ``` 这里使用了 jQuery 的 `index()` 方法，它返回当前元素在其父级中的索引。注意，由于 `ul` 元素可能包含多个 `li` 元素，所以我们使用了事件委托机制，将事件处理程序绑定到 `ul` 元素上，由它来代理处理 `li` 元素的点击事件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值