使用 jQuery 获取列表项的值答案

【问题标题】：Get value of List Item with jQuery使用 jQuery 获取列表项的值
【发布时间】：2011-07-29 18:17:06
【问题描述】：

如何用jQuery获取列表项onClick event的值和索引？
例如：

<ul id='uItem'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

【问题讨论】：

标签： javascript jquery onclick jquery-events

【解决方案1】：

如果你为你的 li 设置了 value 属性：

    <ul id='uItem'>
    <li value="item1">Item 1</li>
    <li value="item2">Item 2</li>
    <li value="item3">Item 3</li>
    <li value="item4">Item 4</li>
    </ul>

，然后你可以像这样使用 jQuery 检索它：

$('#uItem li').click(function(){
    var $this = $(this);
    var selKeyVal = $this.attr("value");
    alert('Text ' + $this.text() + 'value ' + selKeyVal);
})

【讨论】：

【解决方案2】：

$('ul li').click(function(){ 
     var value = $(this).text();
     var index = $('li').index($(this));
});

查看this了解更多详情

【讨论】：

您不能在列表项上使用val()。

【解决方案3】：

$('#uItem li').click(function(){
 var $this = $(this);
 alert('Text ' + $this.text() + 'Index ' + $this.index());
})

在http://jsfiddle.net/yccyJ/1/查看工作示例

【讨论】：

【解决方案4】：

看看索引函数，http://api.jquery.com/index/

【讨论】：

【解决方案5】：

结合使用.index() 和.text()（或.html()，如果你愿意的话）：

$('#uItem li').click(function() {
    var index = $(this).index();
    var text = $(this).text();
    alert('Index is: ' + index + ' and text is ' + text);
});

【讨论】：