Почему метод .html() не работает так как .innerHTML()?

[laimas]

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

Для простых операций да. jQuery, это не новый язык, это js библиотека и в недрах ее все выполняется на нативном JS, то есть JQ берет на себя все "тяготы" кроссбраузерности или позволяет написать "желаемое" простым выражением, которое на нативном JS будет более объемным.

Но если к примеру в цикле, используя jq метод, или в обработчике событий, когда в методе доступен DOM элемент как this, который имеет свойство value, получать этот элемент как jq объект ради получения его значения - $(this).val(), это и глупо, и не оправдано, ибо это получить проще как this.value.

[drakulawz]

Но если к примеру в цикле, используя jq метод, или в обработчике событий, когда в методе доступен DOM элемент как this, который имеет свойство value, получать этот элемент как jq объект ради получения его значения - $(this).val(), это и глупо, и не оправдано, ибо это получить проще как this.value.

Понятно, но это изначально задания на js. Я же пытаюсь зделать их на jq. Не спрашивайте зачем я это делаю, просто мне jq практичнее...

[Dilettante_Pro]

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

Какие цифры?

[laimas]

просто мне jq практичнее...

Использование JQ там где нет необходимости, это не есть практичность, это есть расточительство. Если это единичный случай, ладно, но если правило, то весьма плохо.

Допустим есть поле ввода и нужно что-то сделать на странице при вводе некоторого значения в него. При этом все эти операции не касаются самого поля.

$('input').on('input', function() {
    if(this.value=='x') {
        //что-то делаем используя методы JQ
    }    
})

Здесь ради проверки условия поступать как if($(this).val()=='x') просто расточительство не имеющее ни пользы ни практичности.

А если при этом значении поле должно переливаться цветами аки хамелеон и мы будем "хамелеонить" на JQ, то нам потребуется поле как jq объект, вот тут все оправдано:

$('input').on('input', function() {
     $this = $(this); //input как объект jq
     if($this.val()=='x') { //все ОК
        //хамелеоним с $this
    } else {
        //иначе $this сидит и не отсвечивает
    }   
})

[drakulawz]

laimas

понял... буду иметь в виду. Я везде jq совал так как думал, что он облегчает и сокращает функции и на нативном js вообще никто сейчас не программирует.

Какие цифры?

у Вас числа прописаны словами, вот и интересуюсь, как оно понимает, что это цифры, а не строки с буквами...

[Dilettante_Pro]

drakulawz,
Метод html вызывает функцию столько раз, сколько элементов находится в обьекте num.
Внутренний параметр i работает в качестве счетчика элементов. Слова в html не имеют никакого значения - если бы там были Яблоко , Слон и т.п., то элементы пронумеровались бы точно так же

[drakulawz]

Dilettante_Pro

Ага, оно просто пересчитало параграфы. Я просто сам уже запутался, я ведь в одной теме два разных задания впихнул.
Первое:
Даны N абзацев и кнопка. По нажатию на кнопку запишите в конец каждого абзаца его порядковый номер.
Второе:
Даны N абзацев с числами. По нажатию на кнопку выведите эти числа в инпут через запятую в порядке возрастания.
Выходит, что этот метод не подходит к второму заданию? Он ведь считает сами параграфы, а не то что в них?

[рони]

drakulawz,
цикл each и для первого и для второго

[рони]

drakulawz,
любой цикл html или each или text можно использовать

[Dilettante_Pro]

Второе задание без явного цикла

<div class="p">5</div>
<div class="p">3</div>
<div class="p">1</div>
<div class="p">4</div>
<button class="btn">Sum</button>
<input type="text">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

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

    function sum() {
        var arr = [];
        num.html(function(){ arr.push(+this.innerHTML)});
        inp.val(arr.sort(srt));
    }
    function srt(a, b) {
        if (a > b) {
            return 1;
        }
        if (a < b) {
            return -1;
        }
        if (a == b) {
            return 0;
        }
    }
</script>