web-dev-qa-db-ja.com

jQueryを使用してリストアイテムの値を取得する

JQueryでリストアイテムのonClickイベントの値とインデックスを取得する方法
例えば：

<ul id='uItem'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
javascriptjqueryjavascript-eventsonclick
11
user692415

.index() と .text() （または .html() の使用を組み合わせるご希望の場合）：

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

http://jsfiddle.net/yccyJ/1/ で実際の例を確認してください

9
Hussein

Liの値属性を設定した場合：

    <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);
})
4
user2037235
$('ul li').click(function(){ 
     var value = $(this).text();
     var index = $('li').index($(this));
});

詳細は this を確認してください

0
Andrei Andrushkevich

インデックス関数を見てください http://api.jquery.com/index/

0
Alex