How to get value and index of list item onClick event with jQuery?
for example:
<ul id='uItem'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
How to get value and index of list item onClick event with jQuery?
for example:
<ul id='uItem'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Combine the use of .index()
and .text()
(or .html()
, if you wish):
$('#uItem li').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
$('#uItem li').click(function(){
var $this = $(this);
alert('Text ' + $this.text() + 'Index ' + $this.index());
})
If you had set a value attribute for your 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>
, then you can retrieve it using jQuery like this:
$('#uItem li').click(function(){
var $this = $(this);
var selKeyVal = $this.attr("value");
alert('Text ' + $this.text() + 'value ' + selKeyVal);
})
Have a look at the index function, http://api.jquery.com/index/
$('ul li').click(function(){
var value = $(this).text();
var index = $('li').index($(this));
});
check this for more details