В примере пост 3 не так.
Метод .html() применяется к объекту jQuery, полученному по конкретному элементу DOM
num - объект jQuery со всеми элементами ".p"
num[i] - конкретный элемент DOM
$(num[i]) - объект jQuery конкретного элемента DOM

Это не термин JS :)
У вас часть кода работает с JQ объектами, а часть с DOM (вот и назвал гибридом). Если на чистом JQ используя его методы, то

num.each(function(n, e) {
    $(e).html($(e).html() += ' ' + ++n)
})

где .each() метод выполняющий тоже самое что for(...), n - это индекс текущего элемента, e - текуший элемент как DOM. А если доступен DOM имеющий innerHTML, то зачем же $(e).html($(e).html() += ' ' + ++n), если проще выполнить e.innerHTML += ' ' + ++n. Здесь $(e), это лишняя трата энергии. ;)

Что значит не работает, если вот прям тут работает? 0_о
Разве что древнюю какую версию jq используешь...

function srt(a, b) {
if (a > b) {
return -1;
}
if (a < b) {
return -1;
}
if (a == b) {
return 0;
}
}

ага, т.е. этот метод не применим напрямую к элементам DOM, понял... Благодарю за разъяснение.

На это брекетс ругается и выполнять отказывается вообще.

значит, что ничего не происходит когда я жму по кнопке кроме ошибки $num is not defined. Начинает работать только так:

function sum() {
        $(num).append(function(i){return ' ' + ++i});
    }

В целом - так конечно короче и проще. Благодарю за подсказку.

Это от лени, скопировал не удалив лишнего. Должно быть $(e).html($(e).html() + ' ' + ++n). Но еще раз - не оправдано для простых операций получать JQ объект из доступного DOM объекта.

Невнимательно смотрите примеры.
У Aetae объявление переменных

var $num = $('.p'),

В вашем варианте при

var num = $('.p'),

достаточно

function sum() {
        num.append(function(i){return ' ' + ++i});
    }

Еще вариант - для разнообразия

<div class="p">Первый</div>
<div class="p">Второй</div>
<div class="p">Третий</div>
<div class="p">Четвертый</div>
<button class="btn">Sum</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
var num = $('.p'),
        btn = $('.btn');

    btn.on({
        'click': sum
    });

    function sum() {
        num.html(function(i){return $(this).html() + ' ' + ++i});
    }
</script>

Вместо $(this).html() можно использовать this.innerHTML

Имеете в виду, что лучше делать нативными методами js?

Понял, я скопипастил только функцию... буду повнимательней.

А как функция понимает, что в num записаны цифры? Это в библиотеке jQuery всё приобразовывается?