JQuery 在单击函数后获取 < li > element 的 id/值

如何通知单击的 <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>

(任何可以替换 id 的东西都可以是值，或者其他东西也可以。)

314101 次浏览
小开
最佳答案 
$("#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
});

如果您正在讨论用某些东西替换 ID:

$("#myid li").click(function() {
this.id = 'newId';


// longer method using .attr()
$(this).attr('id', 'newId');
});

为了公平起见，你应该首先阅读文档:

小开

如果您稍微更改了您的 html 代码-删除 id

<ul id='myid'>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>

那么您需要的 jquery 代码是..。

$("#myid li").click(function() {
alert($(this).prevAll().length+1);
});​

您不需要放置任何 id，只需继续添加 li 项。

看看 小样

有用的链接

小开

如果你有多个 li元素内的一个 li元素，那么这肯定会帮助你，我已经检查了它的工作..。

<script>
$("li").on('click', function() {
alert(this.id);
return false;
});
</script>
小开

单击后，可以使用此方法获取相应 li 的值

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:-

$("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:-

ul{
display: flex;
list-style-type:none;
padding: 20px;
}


li{
padding: 20px;
}

提交答案