2

In this example, a jQuery function is presented that when clicked, it prints out the old text and the new text of the element, plus the index of the current element. I'm pretty sure the index must increment (because new elements are being added). But upon testing the code, why is the index showing 0 all the time?

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });
});
Gannicus
  • 530
  • 1
  • 7
  • 26
  • It's the index of the element within the current jquery set. Since that set contains only one element (#test1 or #test2), the index is always zero. – Blazemonger May 04 '14 at 12:08
  • Can you please expound on the "set" terminology here? Even I don't really get what that set (or list) is. The way I see it they're just html elements, there's no list instantiated. – Gannicus May 04 '14 at 12:11
  • You should consider finding a different site to learn from, like https://developer.mozilla.org/en-US/docs/Web. Read this: http://www.w3fools.com/ – Addison May 04 '14 at 12:18
  • I'm aware of the rep w3schools has, but for quick reviews it does the job for me. It's like Wikipedia, it's handy but there are better sources for schoolwork. – Gannicus May 04 '14 at 12:40

2 Answers2

1

Have'nt you heard about w3fools.

I recommend you to follow jQuery official help.

function(index, text) A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

The reason here index is always zero is it is only one p element so it always index 0. Lets say you have multiple li in list, on using index:

$( "ul li" ).text(function( index ) {
   return "item number " + ( index + 1 );
});

will produce:

<ul>
<li>item number 1</li>
<li>item number 2</li>
<li>item number 3</li>
</ul>
Zaheer Ahmed
  • 28,160
  • 11
  • 74
  • 110
0

Here is the same example re-written to explain index...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $(".test1").text(function(i, origText){
      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $(".test1").html(function(i, origText){
      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });
});
</script>
</head>
<body>

<p>This is a <b>bold</b> paragraph.</p>

<ul>
<li class="test1" >item number 1</li>
<li class="test1" >item number 2</li>
<li class="test1" >item number 3</li>
</ul>

<p class="test1">This is another <b>bold</b> paragraph.</p>

<button id="btn1">Show Old/New Text</button>
<button id="btn2">Show Old/New HTML</button>

</body>
</html>

I'm studying on W3schools right now and had the same question. Googling led me to this question and the answers are kind of cryptic. after fiddling with the code i found this and thought someone else might need a clearer answer.

Mohamed Naji
  • 1