jQuery jQuery在点击函数后获取<li>元素的id/value
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3545341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery get the id/value of <li> element after click function
提问by dave
How can I alert the id of the <li>item clicked?
如何提醒<li>点击的项目的 id ？
<ul id='myid'>
<li id='1'>First</li>
<li id='2'>Second</li>
<li id='3'>Third</li>
<li id='4'>Fourth</li>
<li id='5'>Fifth</li>
</ul>
(Anything that can replace the id may be value or something else will also work.)
（任何可以替换 id 的东西都可能是值，或者其他东西也可以。）
回答by karim79
$("#myid li").click(function() {
alert(this.id); // id of clicked li by directly accessing DOMElement property
alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
alert($(this).html()); // gets innerHTML of clicked li
alert($(this).text()); // gets text contents of clicked li
});
If you are talking about replacing the ID with something:
如果您正在谈论用某些东西替换 ID：
$("#myid li").click(function() {
this.id = 'newId';
// longer method using .attr()
$(this).attr('id', 'newId');
});
Demo here.And to be fair, you should have first tried reading the documentation:
演示在这里。公平地说，您应该首先尝试阅读文档：
回答by vikmalhotra
If you change your html code a bit - remove the ids
如果您稍微更改 html 代码 - 删除 ids
<ul id='myid'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
Then the jquery code you want is...
那么你想要的jquery代码是...
$("#myid li").click(function() {
alert($(this).prevAll().length+1);
});?
You don't need to place any ids, just keep on adding li items.
您不需要放置任何 id，只需继续添加 li 项即可。
Take a look at demo
看一下演示
Useful links
有用的链接
回答by Sandeep Mukherjee
you can get the value of the respective li by using this method after click
单击后可以使用此方法获取相应 li 的值
HTML:-
HTML:-
<!DOCTYPE html>
<html>
<head>
<title>show the value of li</title>
<link rel="stylesheet" href="pathnameofcss">
</head>
<body>
<div id="user"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="pageno">
<li value="1">1</li>
<li value="2">2</li>
<li value="3">3</li>
<li value="4">4</li>
<li value="5">5</li>
<li value="6">6</li>
<li value="7">7</li>
<li value="8">8</li>
<li value="9">9</li>
<li value="10">10</li>
</ul>
<script src="pathnameofjs" type="text/javascript"></script>
</body>
</html>
JS:-
JS：-
$("li").click(function ()
{
var a = $(this).attr("value");
$("#user").html(a);//here the clicked value is showing in the div name user
console.log(a);//here the clicked value is showing in the console
});
CSS:-
CSS:-
ul{
display: flex;
list-style-type:none;
padding: 20px;
}
li{
padding: 20px;
}
回答by RaghuVamshiKrishna Boine
If You Have Multiple lielements inside an lielement then this will definitely help you, and i have checked it and it works....
如果你li在一个li元素中有多个元素，那么这肯定会帮助你，我已经检查过它并且它有效......
<script>
$("li").on('click', function() {
alert(this.id);
return false;
});
</script>
