I am a jQuery started so if it is not of good quality forgive me.
I want to know what does index means in the function and what exactly it refers too. Previously i thought it refers to the index number like 0,1,2,3 etc but when i passed 1,2 ,3 in place of index my code stops working. I checked the type of this and it is showing me number data type.
Let me now what exactly im doing wrong and the concept of index and Element in jQuery as most places i found something like this --
function(e){
}
My Working code --
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( 'li' ).html(function( index, oldHtml ) {
//alert(typeof($(this).index()));
return oldHtml + '!!!'
});
});
</script>
</head>
<body>
<ul>
<li>This is List item 1</li>
<li>This is List item 2</li>
<li>This is List item 3</li>
<li>This is List item 4</li>
<li>This is List item 5</li>
</ul>
</body>
</html>
My tries --
$( 'li' ).html(function( 3, oldHtml ) {....
$( 'li' ).html(function( "3", oldHtml ) {....
$( 'li' ).eq(3).html(function( "3", oldHtml ) {......
I am a jQuery started so if it is not of good quality forgive me.
I want to know what does index means in the function and what exactly it refers too. Previously i thought it refers to the index number like 0,1,2,3 etc but when i passed 1,2 ,3 in place of index my code stops working. I checked the type of this and it is showing me number data type.
Let me now what exactly im doing wrong and the concept of index and Element in jQuery as most places i found something like this --
function(e){
}
My Working code --
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<script type="text/javascript" src="http://code.jquery./jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$( 'li' ).html(function( index, oldHtml ) {
//alert(typeof($(this).index()));
return oldHtml + '!!!'
});
});
</script>
</head>
<body>
<ul>
<li>This is List item 1</li>
<li>This is List item 2</li>
<li>This is List item 3</li>
<li>This is List item 4</li>
<li>This is List item 5</li>
</ul>
</body>
</html>
My tries --
$( 'li' ).html(function( 3, oldHtml ) {....
$( 'li' ).html(function( "3", oldHtml ) {....
$( 'li' ).eq(3).html(function( "3", oldHtml ) {......
5 Answers
Reset to default 5The index argument represents the index of the element in the matched collection. You should not be passing values to it. It is an argument that is passed to the anonymous function that you could use inside to know exactly on which element this anonymous function is being invoked if you needed to:
$( 'li' ).html(function( index, oldHtml ) {
return 'new html ' + index;
});
The index is zero based, so the result will be:
<li>new html 0</li>
<li>new html 1</li>
<li>new html 2</li>
<li>new html 3</li>
<li>new html 4</li>
index means the number that points the position of a certain element selected by jquery..
for example the selected element is $('#haha')
<ul id='haha'>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
so the first li is index 0, then 1 and so forth
you make use of index() when looking at data in terms of a collection. eg
<ul>
<li id="foo">foo</li>
<li id="bar">bar</li>
<li id="baz">baz</li>
</ul>
var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));
would give you the index of the bar item in the scope of the li list
see jquery documentation
Description: Search for a given element from among the matched elements.
Index is the order of the element, it will tell you which index this element has. The first one will have index 0 and so on, is very mon in many programming languages and jQuery has this tool for you.
jQuery creates an array of your returned elements, a collection of elements referenced by an index. If you return the typeof it will logically return number as it's a number.
jsBin demo
$( 'li' ).html(function( index, html ) {
if(index===2){ // zero based, so it will colour the 3rd element!
$(this).css({color:'red'});
}
return 'jQuery indexes me inside an array as n:'+ index+
'<br> My HTML: '+ html + '!!!';
});