jQuery点击函数获取<li>元素的id/value的方法

Question

jQuery点击函数获取<li>元素的id/value的方法

73

我该如何在点击 <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 的东西都可以是 value 或其他任何东西，也能起到同样的作用。

- dave

尝试使用 event.target.id。http://api.jquery.com/event.target/ - Pramod

4个回答

14

如果您稍微修改一下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项。

查看演示

有用的链接

jQuery prevAll

- vikmalhotra

谢谢Shivik，但是id已经被定义了。我已经在第一个答案中得到了我想要的答案。再次感谢。 - dave

1

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

- Sandeep Mukherjee

-3

如果您在一个

元素内有多个

元素，那么这将绝对有所帮助，我已经检查过它并且它有效...

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

- RaghuVamshiKrishna Boine

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

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

这里有演示。更公正的做法是先尝试阅读文档：