【问题标题】:jQuery get the id/value of <li> element after click functionjQuery在点击函数后获取<li>元素的id/value
【发布时间】:2011-04-02 12:00:47
【问题描述】:

如何提醒点击的&lt;li&gt; 项目的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 或者其他东西也可以。)

【问题讨论】:

标签: jquery html dhtml


【解决方案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;
}

【讨论】:

    【解决方案2】:

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

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

    【讨论】:

      【解决方案3】:
      $("#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');
      });
      

      Demo here. 公平地说,您应该先尝试阅读文档:

      【讨论】:

      • 如何在没有 jquery 的情况下将其更改为工作
      【解决方案4】:

      如果您稍微更改您的 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项目。

      看看demo

      有用的链接

      【讨论】:

      • 感谢 Shivik,但 id 已经定义。在第一个答案中,我得到了我正在寻找的答案。再次感谢
      猜你喜欢
      • 2012-04-12
      • 2015-08-01
      • 1970-01-01
      • 1970-01-01
      • 2011-12-11
      • 1970-01-01
      • 2022-01-20
      • 1970-01-01
      • 2016-06-30
      相关资源
      最近更新 更多