Como atua o THIS na função index() do jQuery?

Olá,

Primeiramente, meu objetivo é encontrar o índice do parágrafo que eu clico. Para isso, uso duas diferentes formas.

Por padrão, tenho a seguinte marcação HTML:

<button type="button" class="reset">Reset</button>
<br />

<b>Clique em cada um dos parágrafos abaixo para revelar seu índice</b>

<p>Parágrafo um.</p>
<p>Parágrafo dois.</p>
<p>Parágrafo três.</p>

OBS.: o cursor dos parágrafos estão com o valor "pointer".
Ao clicar em um parágrafo, a seguinte função é executada:

<script type="text/javascript">
 $(document).ready(function() {
 $('p').click(function() {
 var indice = $(this).index();
 alert('O índice deste parágrafo é:' + indice + '<br />');
 });

 $('.reset').click(function() {
 $('div').empty();
 });
 });
</script>

 

Ao clicar no primeiro parágrafo, o índice devolvido é 3. Ou seja, o script considera todos os elementos que vem antes do elemento-alvo e traz a posição de acordo com a ordem de marcação do meu documento: '<button>'(0), '<br />'(1), '<b>'(2), '<p>'(3).

Entretanto, se eu modificar a função para esta forma:

<script type="text/javascript">
 $(document).ready(function() {
 $('p').click(function() {
 var indice = $('p').index(this);
 alert('O índice deste parágrafo é:' + indice + '<br />');
 });

 $('.reset').click(function() {
 $('div').empty();
 });
 });
</script>

... e clicar no primeiro parágrafo, a função considera apenas a ordem dos parágrafos da página e diz que o seu índice é 0.

Então garela, na primeira forma o script considera todos os elementos, já na segunda, apenas os elementos parágrafos são considerados. Acontece que eu não entendi o porque disso. Por isso venho aqui pedir uma help.

Desde já muito obrigado! ;)