jQuery 获取
的 id/value点击后的元素功能

发布于 2024-09-15 04:25:34 字数 341 浏览 4 评论 0原文

如何提醒所点击的

项目的 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 的东西都可能是值，或者其他东西也可以。）

原文

How can I alert the id of the <li> item clicked?

<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.)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

つ低調成傷 2024-09-22 04:26:53

如果您在 li 元素内有多个 li 元素，那么这肯定会对您有所帮助，我已经检查过它并且它有效......

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

If You Have Multiple li elements inside an li element then this will definitely help you, and i have checked it and it works....

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

回复收藏 0 原文

丿*梦醉红颜 2024-09-22 04:26:29

后可以使用此方法获取相应 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;
}

you can get the value of the respective li by using this method after click

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;
}

回复收藏 0 原文

会发光的星星闪亮亮i 2024-09-22 04:26:15

如果你稍微改变你的 html 代码 - 删除 ids

<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 项目即可。

查看演示

有用的链接

jQuery prevAll

If you change your html code a bit - remove the 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...

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

You don't need to place any ids, just keep on adding li items.

Take a look at demo

Useful links

jQuery prevAll

回复收藏 0 原文

冷情妓 2024-09-22 04:26:05

$("#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');
});

此处演示。公平地说，您应该先尝试一下阅读文档：

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

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

回复收藏 0 原文

~没有更多了~

关于作者

青柠芒果

暂无简介

0 文章

0 评论

22 人气

关注发私信

Cooper

文章 0 评论 0

关注

Great Marx

文章 0 评论 0

关注

感性

文章 0 评论 0

关注

mb_IvyEMzfd

文章 0 评论 0

关注

止于盛夏

文章 0 评论 0

关注

记忆で

文章 0 评论 0

友情链接

文江博客

jQuery 获取
的 id/value点击后的元素功能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Cooper

Great Marx

感性

mb_IvyEMzfd

止于盛夏

记忆で

友情链接

jQuery 获取的 id/value点击后的元素功能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

Cooper

Great Marx

感性

mb_IvyEMzfd

止于盛夏

记忆で

友情链接

jQuery 获取
的 id/value点击后的元素功能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。