CODEWITHSUNDEEP
javascriptjquerylogic
Trialcoder
Trialcoder

Reputation: 6004

What does index in jquery functions means

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.com/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 ) {......

Upvotes: 4

Views: 2158

Answers (5)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

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 + '!!!';

  });

Upvotes: 0

Santiago Rebella
Santiago Rebella

Reputation: 2449

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 common in many programming languages and jQuery has this tool for you.

Upvotes: 0

Rohan B&#252;chner
Rohan B&#252;chner

Reputation: 5393

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

Upvotes: 0

Netorica
Netorica

Reputation: 19327

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

Upvotes: 1

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

The 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>

Upvotes: 5

Related Questions